next.js: ChunkLoadError (timeout: (chunks/xxx)

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

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

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

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?

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.

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!

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.

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

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

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.

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…

My application keeps having this problem (with dynamic imports)

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!

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

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

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

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

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

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.

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

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.

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

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 }
)

I have the same issue in production, any solution?