Closed mdcarter closed 12 months 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.
This error occurs in the production environment and is reported regularly on Sentry.
Does anyone have a solution for this? We are running into this regularly
This issue still occurs in production environment and happens quite a lot using latest NextJS.
My application keeps having this problem (with dynamic imports)
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.
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.
I'm having the same issue with the same situation described by @ianwensink , all the chunks still exist and can be accessed.
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
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?
I got this problem too in production with Vercel...
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)
I have the same issue in production, any solution?
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...
Same
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
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 the same issue and here is the interesting things:
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.
I have the same issue. Happening on iPhone OS. No problem on desktop browsers.
I'm encountering the same issue while deploying my app to AWS Amplify Hosting.
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 :)
Link to this tweet here: https://twitter.com/yizhuang1996/status/1676745155657846785?t=RL4iF_wpGTmeoqdMUOkZyg&s=19
I have the same issue. Happening on iPhone OS. No problem on desktop browsers.
The same with me. Did you solve this issue?
Happens to me as well. Sentry shows that it only affects safari users, mainly iPhone OS, but there are also a few MacOS incidents
This issue is raised for a lot of Android users on inapp browsers like Facebook or Instagram...
I don't know what to do.
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.
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 ?
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 }
)
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
[slug]
with a static/named route, then it works.page.js
, if i remove the imported component, everything works. dynamically loading the component as suggested in one of the answers, does not help.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..next
folder, however, it returns 404 when accessed via https://.../_next/static/chunks/app/web/tutorial/%5Bslug%5D/page-abc123.js
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!
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
I'm encountering the same issue while deploying my app to AWS Amplify Hosting.
did you solve this?
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
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
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
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.
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.
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?
How about handling it in error boundary to force reload the window after clearing all the caches when there's ChunkLoadError
?
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.
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.
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
upgrading to next v13.5.4 seems to fix the issue for me
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 ;(
+1
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.
I also have the error in v14.0.0
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
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
After removing all instances of 'import Script from 'next/script'', it worked perfectly again for me.
Verify canary release
Provide environment information
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
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