Part of NextJS app no longer working - ChunkLoadError (critical in prod) #48328
Replies: 14 comments 16 replies
-
|
So the chunks is not being found on the server, which gives a 404 and from there the client falls apart. The question is why would it fail to get, or find, the chunk. Are you using middleware, or some other network layer that could be making the request fail? |
Beta Was this translation helpful? Give feedback.
-
I checked out a one-day-old commit or so and that one works but it has an old structure inside the folder app/deposit In that commit deposit/details is not working for a similar Chunk error reason - but it used to work |
Beta Was this translation helpful? Give feedback.
-
|
@icyJoseph okay I found the culprit it seems. It's related to nextJS component Image in the shared code above. By using img instead of Image from nextjs it doesn't throw error - I have many places where I use Image but it doesn't cause an issue, sooo random... |
Beta Was this translation helpful? Give feedback.
-
|
Oh wow, really? What next version do you have? There must be something on that path that's making it fail. Is it all happening in appDir? |
Beta Was this translation helpful? Give feedback.
-
|
using the next version 13.3 (latest) and yes in appDir |
Beta Was this translation helpful? Give feedback.
-
|
I see you were using canary, does it happen downgrading to next@latest or something before 13.3? |
Beta Was this translation helpful? Give feedback.
-
|
I tried a different version (13.2) but it didn’t work. I tried canary since
I saw a mention about a fix that I thought may help.
On Thu, 13 Apr 2023 at 12:06, Joseph ***@***.***> wrote:
I see you were using canary, does it happen downgrading to ***@***.*** or
something before 13.3?
—
Reply to this email directly, view it on GitHub
<#48328 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AYVSQ6ESB4EW2FC6MVLFHU3XA7M2ZANCNFSM6AAAAAAW4WHTYM>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
--
Alexander Thomsen
Founder
Moonbit
***@***.***
www.moonbit.ai
|
Beta Was this translation helpful? Give feedback.
-
|
I had same error. How do u fixed ? thanks |
Beta Was this translation helpful? Give feedback.
-
|
It was nextjs Image component - changed to img and it fixed it |
Beta Was this translation helpful? Give feedback.
-
|
it works |
Beta Was this translation helpful? Give feedback.
-
|
Then are we not letting the whole purpose of next image fail? Which is cache images for high performance. This is a temporary solution with bad performance in return. |
Beta Was this translation helpful? Give feedback.
-
|
It was nextjs Image component - changed to img and it fixed it
On Sat, 13 May 2023 at 02:26, Nhật Lâm ***@***.***> wrote:
I had same error. How do u fixed ? thanks
—
Reply to this email directly, view it on GitHub
<#48328 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AYVSQ6A6COECVS3ESGGKEJLXF3PNRANCNFSM6AAAAAAW4WHTYM>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
--
Alexander Thomsen
Founder
Moonbit
***@***.***
www.moonbit.ai
|
Beta Was this translation helpful? Give feedback.
-
|
I had same error after builded my next app with export config active, to have a static a website and deploy it on apache. With mamp in localhost, there's no problems any but on prod yes. If problem came out on nginx prod also, i don't understand why the problem is not come out in more topics. For resolve on apache prod i had to change manually path [locale ] ( my [lang] folder ) with simple "locale" in all files in /out folder and renamed folder also with the same name. This problem seems happen because a codification of chrome about the name of folder [locale]. I will try on nginx making a not static build, but for now, for who have this problems on apache, this is a manually solutions. |
Beta Was this translation helpful? Give feedback.
-
|
Also having this problem, If I turn dynamicParams off it stops showing but still fails to load the chunk. |
Beta Was this translation helpful? Give feedback.
-
|
Leaving it here so that it might help someone. In my case it was just happening on production and not on local, I was getting a 301 for when the /path/[chunk] was being requested. This ended happening because of a redirect rule I had on cloudflare that was redirecting any /path to a different location. So when next tried fetching that particular chunk, the redirect rule came into play and redirecting the request to a completely different url where obviously it wasn't able to get the chunk. Turning off the redirect rule fixed it |
Beta Was this translation helpful? Give feedback.
-
|
Over a year and no real answer? |
Beta Was this translation helpful? Give feedback.
-
Yep, that's the way we do it)) |
Beta Was this translation helpful? Give feedback.
-
|
To achieve custom file naming and handle various other requirements, you can extend the Webpack configuration in your
config.output.filename = () => `static/chunks/[name].js`;
config.output.chunkFilename = () => `static/chunks/[name].js`;
new MiniCssExtractPlugin({
filename: () => `static/css/[name].css`,
chunkFilename: () => `static/css/[name].css`,
});Full Webpack code webpack: (config, { isServer, buildId, dev }) => {
// Fixes npm packages that depend on `fs` module
if (!isServer) {
config.resolve.fallback.fs = false;
}
/**
* Returns environment variables as an object
*/
const env = Object.keys(process.env)
.filter((key) => !key.includes('NEXT_'))
.reduce((acc, curr) => {
acc[`process.env.${curr}`] = JSON.stringify(process.env[curr]);
return acc;
}, {});
/** Allows you to create global constants which can be configured
* at compile time, which in our case is our environment variables
*/
config.plugins.push(new webpack.DefinePlugin(env));
//Required to prevent "React is not defined" error
config.plugins.push(new webpack.ProvidePlugin({
React: "react",
}))
if (!isServer && !dev) {
config.plugins.push(new CustomChunkNamingPlugin());
config.output.filename = () => {
return `static/chunks/[name].js`;
};
config.output.chunkFilename = () => {
return `static/chunks/[name].js`;
}
}
if (!dev) {
config.plugins.push(
new MiniCssExtractPlugin({
filename: () => {
return `static/css/[name].css`;
},
chunkFilename: () => {
return `static/css/[name].css`;
},
})
);
// Ensure the splitChunks configuration exists
//if (!config.optimization.splitChunks) {
config.optimization.splitChunks = {
chunks: 'all',
maxSize: 240000,
};
//}
// Adjust the splitChunks configuration for styles
config.optimization.splitChunks.cacheGroups = {
...config.optimization.splitChunks.cacheGroups,
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
maxSize: 240000,
chunks: 'all',
},
styles: {
name: false,
test: /\.(css|scss)$/,
chunks: 'all',
enforce: true,
},
};
// Add rules for processing CSS and SCSS files
config.module.rules.push(
{
test: /\.module\.(css|scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[name]_[local]__[hash:base64:5]',
},
importLoaders: 2,
},
},
{
loader: 'resolve-url-loader',
options: {
sourceMap: dev,
},
},
'sass-loader',
],
},
{
test: /\.(css|scss)$/,
exclude: /\.module\.(css|scss)$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'resolve-url-loader',
options: {
sourceMap: dev,
},
},
'sass-loader',
],
}
);
}
return config;
},This setup gives you full control over file naming, CSS/SCSS handling, and performance optimizations in your Next.js project. |
Beta Was this translation helpful? Give feedback.
-
|
Is this working? |
Beta Was this translation helpful? Give feedback.
-
|
Same error.Any solutions? |
Beta Was this translation helpful? Give feedback.
-
|
Any working solution? Seems like need to try something else and not next |
Beta Was this translation helpful? Give feedback.
-
|
We’re encountering this issue in production where users on Chrome 83 and Safari 12 (and below) are unable to access the application. This is causing significant frustration for both our users and our team. We’re currently using Next.js 14.2.24, and this issue seems to be directly impacting user experience for those on older browser versions. 
Any solutions of suggestion? |
Beta Was this translation helpful? Give feedback.
-
|
If your server is behind Cloudflare or another CDN, check whether caching policy is causing the issue. The error occurred because Cloudflare cached an outdated file with a mismatched path, leading to a 404 error. To fix this, ensure consistent file naming across deployments to prevent chunk errors. You can refer this explanation - #48328 (comment) |
Beta Was this translation helpful? Give feedback.
-
|
@kassiwin I think the |
Beta Was this translation helpful? Give feedback.
-
|
Any working solution? It seems like everyone is trying different things |
Beta Was this translation helpful? Give feedback.
-
|
In case anyone is still experiencing this: here's why I was experiencing it, and how I fixed it:
Or, in a Dockerfile: It seems like a pretty opinionated and large assumption by Next that just because you're Dockerizing your app, you are default going to host your chunks on CDNs. Some of us just want to Dockerize for other reasons, such as consistent dev environments, running on Docker-based PaaS like Aptible, etc. And at the same time, once an app reaches the level of sophistication where static assets are being hosted on a CDN, it's probably a more mature app with a DevOps person or two in the picture. It seems like including static assets in standalone mode should be the default. 🤷 |
Beta Was this translation helpful? Give feedback.
-
|
In our instance, the issue was related to browser caching. During a new deployment, existing files were still cached and referencing invalid chunks, resulting in seemingly random crashes. This was caused by the If that does not help. You might also explore passing the deployment ID that will ensure unique chunk names between deployments. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks a lot for writing this. I tried the deploymentId and it works fine. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Summary
We are recently seeing errors in the Production and even localhost (npm run build/run start) where on some pages it gives "Application error: a client-side exception has occurred (see the browser console for more information)". When I check the console it shows the following error
ChunkLoadError: Loading chunk 5760 failed.
(error: http://localhost:3000/_next/static/chunks/5760-40c839657ea31a15.js)
at d.f.j (webpack-a66c4bcffce5144a.js:1:3328)
at webpack-a66c4bcffce5144a.js:1:1385
at Array.reduce ()
at d.e (webpack-a66c4bcffce5144a.js:1:1351)
at self.next_chunk_load (5782-03768f85683b0a9b.js:1:5780)
at 5782-03768f85683b0a9b.js:9:2777
at 5782-03768f85683b0a9b.js:9:3187
at M (5782-03768f85683b0a9b.js:9:3390)
at t (5782-03768f85683b0a9b.js:9:5961)
We tried different things like
our next.config.json
Our package.json
Help appreciated!
Beta Was this translation helpful? Give feedback.
All reactions