Part of NextJS app no longer working - ChunkLoadError (critical in prod) #48328
Replies: 8 comments 12 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.
-
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