ChunkLoadError (timeout: (chunks/xxx)

mdcarter commented 2 years ago

Verify canary release

[X] 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 commented 2 years ago

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 commented 2 years ago

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

ianwensink commented 1 year ago

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

gabrielbull commented 1 year ago

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

igorpwnd commented 1 year ago

My application keeps having this problem (with dynamic imports)

longyarnz commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

Bissane commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

FengeRVictor commented 1 year ago

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 commented 1 year ago

I have the same issue in production, any solution?

FengeRVictor commented 1 year ago

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 commented 1 year ago

Same

davidbnk commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

el-frontend commented 1 year ago

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

riccardolinares commented 1 year ago

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 commented 1 year ago

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

carosaome commented 1 year ago

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

The same with me. Did you solve this issue?

PrzemyslawPolrolniczak commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 ?

baptisteArno commented 1 year ago

I fixed the issue in my case:

I had a component that dynamically imported a file in a useEffect (because it is a client-side-only package):

useEffect(() => {
    ;(async () => {
      await import('@typebot.io/js/dist/web')
    })()
  }, [])

This is what caused the issue for some reason I don't know.

Now what I'm doing instead is to import the library at the top of the file: import '@typebot.io/js/dist/web' and dynamically load the entire component with next/dynamic:

export const Standard = dynamic(
  () => import('@typebot.io/react/src/Standard'),
  { ssr: false }
)

designcise commented 1 year ago

Problem

this is happening for me as well with dynamic routes (e.g. app/whatever/[slug]/page.js) in next.js 13 app router; it always fails to load the chunk for the dynamic route on production.

Environment Details

Operating System:
      Platform: linux
      Arch: x64
      Version: getsentry/sentry-javascript#1 SMP Tue Jan 25 12:49:12 MSK 2022
    Binaries:
      Node: 18.17.0
      npm: 9.6.7
      Yarn: 1.22.19
      pnpm: N/A
    Relevant Packages:
      next: 13.4.14-canary.1
      eslint-config-next: 13.4.14-canary.1
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

Observations

if i substitute [slug] with a static/named route, then it works.
i'm only importing only one component in this route's page.js, if i remove the imported component, everything works. dynamically loading the component as suggested in one of the answers, does not help.
the 404 / "page-abc123.js:1 ChunkLoadError: Loading chunk xyz failed." happens only when the link is accessed directly. if you navigate to the url via a link in the app, it works fine.
the missing chunk does exist in the .next folder, however, it returns 404 when accessed via https://.../_next/static/chunks/app/web/tutorial/%5Bslug%5D/page-abc123.js
i do my server deployments via github actions; to rule out issues with that, i even tried directly adding files to the server using SFTP, but the same issue persists

i even tried setting up the https://vercel.com/templates/next.js/app-directory demo on my server, and it's reproducible, however, the same issue does not seem to be on, for example, https://app-router.vercel.app/not-found/does-not-exist

Conclusion

i have tried about 5 days looking for a solution, but it has been to no avail. any help would be greatly appreciated!

Elio-Muculo commented 1 year ago

I'm facing the same issue, has anyone find a way to fix this?

Locally the build runs perfectly but on production the chunk is not found even if it exists on the folder this is so weird and it just happen for dynamic route

/route/[slug]/page.tsx

ebennaga commented 1 year ago

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

did you solve this?

patte commented 1 year ago

We encountered the same problem in production. Environment:

Operating System:
  Platform: linux
  Arch: x64
Binaries:
  Node: 20.5.1
  npm: 9.8.0
  Yarn: 1.22.19
Relevant packages:
  next: 13.4.16
  eslint-config-next: 13.4.16
  react: 18.2.0
  react-dom: 18.2.0

We saw that after a deploy the name https://DOMAIN/_next/static/chunks/webpack-dcd23afe491cce30.js did not change, even tough it's content changed. As the file has a long max-age (31536000) this resulted in the client's browser using the cached version, which tried to fetch chunks that didn't exist in the new build. Resulting in the error message: Loading chunk 3572 failed.

Screenshot diff

![Clipboard - August 16, 2023 11 53 AM](https://github.com/vercel/next.js/assets/3500621/a4e9c736-98eb-4c0e-80a9-d92eec23aa58)

As a workaround we added the buildId to the name of all chunks by modifying the webpack config like so:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
  transpilePackages: ['@parse/node-apn', 'web-push'],
  // ugly hack to make sure all chunks have a cache-busting hash
  // we had the issue in production of /_next/static/chunks/webpack-dcd23afe491cce30.js
  // not changing it's filename when the content changed.
  // https://github.com/vercel/next.js/issues/38507
  webpack: (config, { buildId }) => {
    // only apply it if dev: false, isServer: false, nextRuntime: undefined
    if (config.output.filename === 'static/chunks/[name]-[chunkhash].js') {
      config.output.filename = `static/chunks/[name]-[chunkhash]-${buildId}.js`
    }
    return config
  },
}

module.exports = nextConfig

designcise commented 1 year ago

We encountered the same problem in production. Environment:
Operating System:
  Platform: linux
  Arch: x64
Binaries:
  Node: 20.5.1
  npm: 9.8.0
  Yarn: 1.22.19
Relevant packages:
  next: 13.4.16
  eslint-config-next: 13.4.16
  react: 18.2.0
  react-dom: 18.2.0
We saw that after a deploy the name https://DOMAIN/_next/static/chunks/webpack-dcd23afe491cce30.js did not change, even tough it's content changed. As the file has a long max-age (31536000) this resulted in the client's browser using the cached version, which tried to fetch chunks that didn't exist in the new build. Resulting in the error message: Loading chunk 3572 failed.

Screenshot diff As a workaround we added the buildId to the name of all chunks by modifying the webpack config like so:
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
  transpilePackages: ['@parse/node-apn', 'web-push'],
  // ugly hack to make sure all chunks have a cache-busting hash
  // we had the issue in production of /_next/static/chunks/webpack-dcd23afe491cce30.js
  // not changing it's filename when the content changed.
  // https://github.com/vercel/next.js/issues/38507
  webpack: (config, { buildId }) => {
    // only apply it if dev: false, isServer: false, nextRuntime: undefined
    if (config.output.filename === 'static/chunks/[name]-[chunkhash].js') {
      config.output.filename = `static/chunks/[name]-[chunkhash]-${buildId}.js`
    }
    return config
  },
}

module.exports = nextConfig

i tried this, however, the issue still persists for me unfortunately .. my issue is specifically with chunks created for dynamic route javascript files

zvs001 commented 1 year ago

Problem

this is happening for me as well with dynamic routes (e.g. app/whatever/[slug]/page.js) in next.js 13 app router; it always fails to load the chunk for the dynamic route on production.



**Observations**

* if i substitute `[slug]` with a static/named route, then it works.
* i'm only importing only one component in this route's `page.js`, if i remove the imported component, everything works. dynamically loading the component as suggested in one of the answers, does not help.
* the 404 / "`page-abc123.js:1 ChunkLoadError: Loading chunk xyz failed.`" happens only when the link is accessed directly. if you navigate to the url via a link in the app, it works fine.
* the missing chunk does exist in the `.next` folder, however, it returns 404 when accessed via `https://.../_next/static/chunks/app/web/tutorial/%5Bslug%5D/page-abc123.js`
* i do my server deployments via github actions; to rule out issues with that, i even tried directly adding files to the server using SFTP, but the same issue persists

i even tried setting up the https://vercel.com/templates/next.js/app-directory demo on my server, and it's reproducible, however, the same issue does not seem to be on, for example, https://app-router.vercel.app/not-found/does-not-exist

I dive into same issue today. Reproduced on next: 13.4.19.

Seems next server doesn't match uri-encoded [slug] with existing folder. I have this issue only on linux server. When I am working under mac, I don't have this problem.

I tried to downgrade to next@13.3.4 and issue was fixed.

Seems we can confirm that we have issue with path resolving on static server. At least we have temporary workaround

marwinlewis commented 1 year ago

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.

pimmee commented 1 year ago

Also seeing a lot of these errors in sentry (and have been for a long time). It happens when I deploy a new version (NextJS / Vercel).

At first I thought it was related to NextJS Router Cache caching chunks that is removed on new deployments, but the chunks are still accessible via URL as other people have mentioned, so I'm a bit perplexed...

I'm currently on next 13.4.12, but we've had this issue for a long time.

Right now we're deploying new versions during the night and have implemented custom cache busting (i.e. page reload) functionality to mitigate the issue.

It would be great if new deployments seamlessly purges any cache or whatever is causing this issue, so we can confidently deploy changes often without risk of users seeing an error screen.

silent1mezzo commented 1 year ago

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 commented 1 year ago

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

fdev commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

Heads up - the change to default ignore these error is live on sentry.io ref: https://github.com/vercel/next.js/issues/38507#issuecomment-1737937921

ref: https://github.com/getsentry/sentry/issues/57458

designcise commented 1 year ago

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

krthush commented 1 year ago

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 commented 1 year ago

+1

gidgudgod commented 1 year ago

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 commented 1 year ago

I also have the error in v14.0.0

federicocappellotto97 commented 1 year ago

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 commented 1 year ago

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 - https://github.com/vercel/next.js/pull/54752

DanielWTE commented 1 year ago

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

vercel / next.js