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...

[raphael1807]

Same

[davidbnk]

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.

I dont think this is the problem, at least in my case, because the problematic chuck is accessible after the error has ocurred. For example I get a stacktrace like this in sentry:

ChunkLoadError: Loading chunk 707 failed.
(error: https://www.mywebsite.com/_next/static/chunks/707-e73a4e529df34709.js)
  at ? (app:///_next/static/chunks/webpack-aaa2a25000886b98.js:1:3378)
  at ? (app:///_next/static/chunks/webpack-aaa2a25000886b98.js:1:1427)
  at reduce([native code])
  at ? (app:///_next/static/chunks/webpack-aaa2a25000886b98.js:1:1399)
  at c(./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.min.js:11:96)
  at c(./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.min.js:11:481)
  at X(./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.min.js:28:399)
  at c(./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.min.js:33:175)
  at promiseReactionJob([native code])

If I try to access https://www.mywebsite.com/_next/static/chunks/707-e73a4e529df34709.js right after the error has been reported to sentry, it is accessible
My guess is that the loading failed but because of another reason, since the file exists

[BenBrewerBowman]

Has anyone made any progress on this issue? I'm running into the same problem and cannot for the life of me figure out how to resolve this.

[mix0000]

I have the same issue and here is the interesting things:

• This bug is not related with NextJS. I get it on SPA, wepback(5.74.0)
• Reproduces only in Chrome, not even in Microsoft Edge..
• The problem is not related with network because webpack dont event tries to request the file..

[NathanielHill]

I have the same issue, being experienced by users in production (they end up seeing a network error toast).

It is happening only on Chrome (113 & 114), but on Windows and macOS.

The JS bundle files are accessible.

[riccardolinares]

I have the same issue. Happening on iPhone OS. No problem on desktop browsers.

[gsi-chao]

I'm encountering the same issue while deploying my app to AWS Amplify Hosting.

[riccardolinares]

I have the same issue. Happening on iPhone OS. No problem on desktop browsers.

My problem was with a tailwind class. I was assigning a class after rendering the component. I deleted it and now it works :)

[YIZHUANG]

Link to this tweet here:
https://twitter.com/yizhuang1996/status/1676745155657846785?t=RL4iF_wpGTmeoqdMUOkZyg&s=19

[carosaome]

I have the same issue. Happening on iPhone OS. No problem on desktop browsers.

The same with me. Did you solve this issue?

[PrzemyslawPolrolniczak]

Happens to me as well. Sentry shows that it only affects safari users, mainly iPhone OS, but there are also a few MacOS incidents

[baptisteArno]

This issue is raised for a lot of Android users on inapp browsers like Facebook or Instagram...

I don't know what to do.

[BenBrewerBowman]

I have the same issue and here is the interesting things:

• This bug is not related with NextJS. I get it on SPA, wepback(5.74.0)
• Reproduces only in Chrome, not even in Microsoft Edge..
• The problem is not related with network because webpack dont event tries to request the file..

I think this might actually be a Next issue in this case. You can have chunk loading errors with any app that uses code splitting, but this one in particular is interesting to me bc of the way it behaves. When working w/ SPA apps on Webpack in the past, we solved this problem by updating the cache w/ the new chunks. The links were actually bad when clicking them (the chunk actually did not exist anymore). This one "feels" to me like Next bc the chunk actually loads whenever I follow the link. Our logs are blowing up w/ chunk loading errors on the user front, however, when I visit the link to the chunk that failed to load, it always loads for me. I think this is odd bc the chunk does in fact exist and the URL points to the chunk. It seems like there is either a timing problem where it doesn't exist for a short period of time, or it is having problems being loaded properly. Might not be a Next error, but it feels like it would be as the chunk does exist and I can always link to it correctly.

[SergiuGrisca]

Sentry is still reporting this type of errors in our prod,
we are using next with nx , version of the next is 13.4.8

any progress on this ?

[silent1mezzo]

We're (Sentry) looking at filtering these errors out by default since they don't seem to be actionable. Would this be helpful to y'all?

[charanjit-singh]

How about handling it in error boundary to force reload the window after clearing all the caches when there's ChunkLoadError?

[fdev]

It's not necessarily to do with deploying. I have a NextJS application that was deployed on (and running since) April 28th and I still get Chunk Load Errors almost daily.

[onomated]

In my case I have dynamic routing pages > [category] > index.tsx and [id].tsx. The problem started after upgrading nextjs. I also tried the router app and the same problem. 404 in compiled js file in production environment. As zvs001 suggested, downgrading to 13.3.4 fixes this issue.

I had this issue with the latest Canary version. I updated to this package version "next": "13.5.5-canary.0", at the time of this post and it resolved the issue. The platforms example app also has [domain] and [slug] folders.

Likely unrelated, but on initial deploy, my main page 404s and I occasionally have to empty cache and hard reload right after deploy to avoid the error. Sharing in case the fix is a sequence of steps shared to get this to work.

[HazAT]

Heads up - the change to default ignore these error is live on sentry.io
ref: #38507 (comment)

ref: getsentry/sentry#57458

[designcise]

upgrading to next v13.5.4 seems to fix the issue for me

[krthush]

we now seem to be running into this issue as well, did try upgrading to next v13.5.4 and hasn't fixed it
have installed sentry now see how bad really this problem is for our users but the inconsistency of it is not ideal ;(

[gidgudgod]

I got this error as well in production. In my case this error happened when I add Next.js headers() to every server request (I do this in order to forward end user's headers to my API).
Next.js version that I used is v13.5.6. After downgrading to 13.5.4, error is gone.

[B-urb]

I also have the error in v14.0.0

[federicocappellotto97]

I have the same problem with v14.0.0
App dir, i have a folder [...slug] and when i click to a link that take to that folder i got
ChunkLoadError: Loading chunk app/[...slug]/page failed.
(error: http://localhost:3000/_next/static/chunks/app/%255B...slug%255D/page.js)

If i refresh the page works

[jianliao]

I have the same problem with v14.0.0
App dir, i have a folder [...slug] and when i click to a link that take to that folder i got
ChunkLoadError: Loading chunk app/[...slug]/page failed.
(error: http://localhost:3000/_next/static/chunks/app/%255B...slug%255D/page.js)

I pretty sure the this error on 13/14 with App dir was caused by this PR - #54752

[DanielWTE]

After removing all instances of 'import Script from 'next/script'', it worked perfectly again for me.

[jianliao]

Check #57829 out. Remove beforeInteractive could work around this issue.

[lunoob]

Check #57829 out. Remove beforeInteractive could work around this issue.

thank you, it work for me

[donttouchmylancable]

I have the same problem, after deploying a demo branch for a customer.
The Main Branch that worked for a month also doesnt work any more.
I even deleted the cache of both project, but it results in the same issue

[huozhi]

Is anyone still having the chunk loading issue after upgrading to 14.0.2 where we had a fix for it or above versions? If you still have the problem with new version, please open a new issue with reproduction that would be helpful for investigating the specific issues you're encountering. Thanks!

[igorvargasp]

I was having this problem with next 14.0.2. Downgrading to 14.0.0 worked for me

[iamtun]

I was having this problem in two project with versions: 13.1.1 page router & 13.4.19 app router. I get error in prod
domain/_next/static/media/physics.8bfdd492.svg 522
domain/_next/static/chunks/webpack-a0c7d2a893c108f8.js net::ERR_ABORTED 522

When get resource in _next then get error :(
Can you help me fix it. Thanks

[huozhi]

@igorvargasp @iamtun could you file a different issue with reproduction? It's not clear what the exact issue is and what's the root causes of them

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.