Everything was working fine locally, but the whole console gets red with ChunkLoadError after you deploy to production. Moreover, the frontend becomes blank white and you see Application error: a client-side exception has occurred (see the browser console for more information). The issue seems to be here for a while, and it looks like no-one knows which part exactly is responsible for the error (Next.js or Webpack or both), but the workaround is present.
Here are the steps that helped in my situation:
- Remove any cache folders in your build steps. That is, any kind of
.next/,out/, or any other folder that is not a part of the repository and not related to the application or configuration. - Re-build your project and deploy to production.
- Disable browser cache completely and do a hard-refresh (Shift + R on Windows, or Cmd + Shift + R on Mac)
Did you know that I made an in-browser image converter, where you can convert your images without uploading them anywhere? Try it out and let me know what you think. It's free.