Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ChunkLoadError (timeout: (chunks/xxx) #38507

Closed
1 task done
mdcarter opened this issue Jul 11, 2022 · 58 comments
Closed
1 task done

ChunkLoadError (timeout: (chunks/xxx) #38507

mdcarter opened this issue Jul 11, 2022 · 58 comments
Labels
bug Issue was opened via the bug report template. locked

Comments

@mdcarter
Copy link

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

@mdcarter mdcarter added the bug Issue was opened via the bug report template. label Jul 11, 2022
@yoshiko-pg
Copy link

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
Copy link

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

@ianwensink
Copy link

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

@gabrielbull
Copy link

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

@igorpwnd
Copy link

My application keeps having this problem (with dynamic imports)

@longyarnz
Copy link

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
Copy link

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
Copy link

HQ063 commented Mar 21, 2023

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

@Bissane
Copy link

Bissane commented Apr 26, 2023

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
Copy link
Contributor

i8ramin commented May 7, 2023

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
Copy link

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

@FengeRVictor
Copy link

FengeRVictor commented May 18, 2023

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
Copy link

AyrDS commented May 22, 2023

I have the same issue in production, any solution?

@FengeRVictor
Copy link

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
Copy link

Same

@davidbnk
Copy link

davidbnk commented Jun 9, 2023

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
Copy link

BenBrewerBowman commented Jun 22, 2023

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
Copy link

mix0000 commented Jun 26, 2023

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
Copy link
Contributor

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
Copy link

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

@gsi-chao
Copy link

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

@riccardolinares
Copy link

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
Copy link

YIZHUANG commented Jul 6, 2023

@carosaome
Copy link

carosaome commented Jul 12, 2023

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

The same with me. Did you solve this issue?

@PrzemyslawPolrolniczak
Copy link

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
Copy link

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
Copy link

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
Copy link

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
Copy link

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
Copy link

charanjit-singh commented Sep 29, 2023

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

@fdev
Copy link

fdev commented Sep 29, 2023

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
Copy link

onomated commented Oct 4, 2023

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

@HazAT
Copy link

HazAT commented Oct 4, 2023

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

ref: getsentry/sentry#57458

@designcise
Copy link

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

@krthush
Copy link

krthush commented Oct 12, 2023

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 ;(

@70ki8suda

This comment has been minimized.

@gidgudgod
Copy link
Contributor

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
Copy link

B-urb commented Oct 27, 2023

I also have the error in v14.0.0

@federicocappellotto97
Copy link

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
Copy link

jianliao commented Oct 31, 2023

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
Copy link

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

@jianliao
Copy link

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

@lunoob
Copy link

lunoob commented Nov 1, 2023

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

thank you, it work for me

@donttouchmylancable
Copy link

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
Copy link
Member

huozhi commented Nov 28, 2023

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!

@huozhi huozhi closed this as completed Nov 28, 2023
@igorvargasp
Copy link

igorvargasp commented Nov 28, 2023

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

@iamtun
Copy link

iamtun commented Nov 30, 2023

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
Copy link
Member

huozhi commented Nov 30, 2023

@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

Copy link
Contributor

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Dec 14, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue was opened via the bug report template. locked
Projects
None yet
Development

No branches or pull requests