ChunkLoadError (timeout: (chunks/xxx)

[mdcarter]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.5.0: Tue Apr 26 21:08:22 PDT 2022; root:xnu-8020.121.3~4/RELEASE_X86_64
Binaries:
  Node: 16.16.0
  npm: 8.11.0
  Yarn: 1.22.18
  pnpm: N/A
Relevant packages:
  next: 12.2.2
  eslint-config-next: 12.1.5
  react: 17.0.2
  react-dom: 17.0.2

What browser are you using? (if relevant)

Firefox 102.0

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

When a next js project containing static pages is hosted on Vercel (or anywhere I'm guessing) it regularly generate exception related to chunk loading

ChunkLoadError: Loading chunk 3662 failed.
(error: https://xxx.com/_next/static/chunks/29107295-0151559bd23117ba.js)

I looked everywhere for a simple fix for this, it exist in dev mode (simply delete the .next folder) but nothing for website in production since it's a caching issue.

Expected Behavior

This should not happen, or generate exceptions

Link to reproduction

https://stackblitz.com/edit/vercel-next-js-ehpskx

To Reproduce

Create a nextjs project with static pages (via getStaticProps), install Sentry for error tracking and generate trafic

[yoshiko-pg]

I have the same problem, also happening in Chrome and Safari.
When this error occurs, the entire screen also fails.

If the user does a super reload (hold down Shift while reloading) it resolves the problem, but there is no way to make the user do a super reload from javascript.

[yoshiko-pg]

This error occurs in the production environment and is reported regularly on Sentry.

[ianwensink]

Does anyone have a solution for this? We are running into this regularly

[gabrielbull]

This issue still occurs in production environment and happens quite a lot using latest NextJS.

[igorpwnd]

My application keeps having this problem (with dynamic imports)

[longyarnz]

This error is thoroughly explained here. It's an error due to caching split chunks of the js bundle. The bigger issue is that it cannot be recovered from in production. A possible way to fix it is to edit the cache parameters on the index or page file where is the address to the chunk is provided. I don't know how to do that.

[ianwensink]

You are assuming that this is the issue, but I'm not convinced. For us all of the chunks that are presumably not loading still exist to this day. Even while the loading error was from a month ago, the chunk still exists now.

[HQ063]

I'm having the same issue with the same situation described by @ianwensink , all the chunks still exist and can be accessed.

[Bissane]

commenting here to ask if there is any way to solve the issue? I built my webapp using nextjs13 and it's been super frustrating when I tried to release it to production

[i8ramin]

Also experiencing this very exact problem. commenting here and hoping for some sort of viable solution from either the nextjs or vercel team. Someone mentioned a service worker solution to load all js and chunks. has anyone tried this and does it work?

[alexgilbertDG]

I got this problem too in production with Vercel...

[FengeRVictor]

Hello ! I have the same issue after resetting my cache of my website in production in google chrome:
Loading chunk 2011 failed. (error: _next/static/chunks/2011-98d69fab14b3f7d2.js)
Looks like it is related to my 404 page.

I have found : https://rollbar.com/blog/javascript-chunk-load-error/
With this sentence :

Along with this approach, it’s also a good idea to have your index.html and entrypoint files never cached, which can be done using the cache-control header (Cache-Control - HTTP | MDN)

[AyrDS]

I have the same issue in production, any solution?

[FengeRVictor]

I have found a solution, don't know if it can help you :

// Put all your pages that have this issue
const urls = [
  "/dashboard",
];

const fetchAllPages = () => {
  const requests = urls.map((url) => fetch(url, { cache: "no-cache" }));

  return Promise.all(requests);
};

await fetchAllPages();

When you do a fetch with no-cache, it will fetch a new page and you will no longer have this error again for the specific page.

It works for me...