Next.js ChunkLoadError: Loading chunk failed after deploying.

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:

  1. 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.
  2. Re-build your project and deploy to production.
  3. 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.

Leave a Comment

Your email address will not be published. Required fields are marked *