Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

chunk loading issue when using a runtime chunk

See original GitHub issue

Operating System: Windows 10.0.19041
Node Version: 12.18.3
NPM Version: 6.14.8
webpack Version: 5.0.0
mini-css-extract-plugin Version: 1.0.0

Expected Behavior

Chunk should be loaded, but the chunk file doesn’t exist.

Actual Behavior

Uncaught (in promise) ChunkLoadError: Loading chunk 532 failed.
(error: https://www.project.com.lndo.site/static/chunks/532.undefined.js)

Code

It seems the hash for the runtime chunk is lost somewhere. (runtime.undefined.css)

runtime.js

// ...
(() => {
        a.miniCssF = e => e === 666 ? "runtime.undefined.css" : e === 532 ? "styles.98bd00b5d36e0ca0bff1.css" : e === 736 ? "vendor.31d6cfe0d16ae931b73c.css" : e === 179 ? "main.31d6cfe0d16ae931b73c.css" : "chunks/" + e + "." + {
            "117": "31d6cfe0d16ae931b73c",
            "145": "31d6cfe0d16ae931b73c",
            "226": "31d6cfe0d16ae931b73c",
            "272": "31d6cfe0d16ae931b73c",
            "273": "31d6cfe0d16ae931b73c",
            "307": "31d6cfe0d16ae931b73c",
            "309": "31d6cfe0d16ae931b73c",
            "310": "31d6cfe0d16ae931b73c",
            "391": "31d6cfe0d16ae931b73c",
            "404": "31d6cfe0d16ae931b73c",
            "431": "31d6cfe0d16ae931b73c",
            "598": "31d6cfe0d16ae931b73c",
            "600": "31d6cfe0d16ae931b73c",
            "737": "31d6cfe0d16ae931b73c",
            "768": "31d6cfe0d16ae931b73c",
            "859": "31d6cfe0d16ae931b73c",
            "866": "31d6cfe0d16ae931b73c"
        }[e] + ".css"
    })()
// ...

How Do We Reproduce?

Configure a runtime chunk and use mini-css-extract-plugin. When not using mini-css-extract-plugin the problem does not occur, it seems.

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:16 (9 by maintainers)

Top GitHub Comments

3reactions

sokracommented, Oct 12, 2020

I think I have a fix for that locally.

2reactions

thasmocommented, Oct 11, 2020

Tried to simplify the setup as much as possible; mind that I’m using an utility/tool to generate the webpack config. https://github.com/thasmo/mini-css-extract-plugin-test

git clone https://github.com/thasmo/mini-css-extract-plugin-test.git
cd mini-css-extract-plugin-test
nvm use
npm i
npm run build
cat dist/runtime.f7deb993.js

// ...
(() => {
    n.miniCssF = t => t === 666 ? "runtime.undefine.css" : t === 179 ? "main.31d6cfe0.css" : "chunks/" + t + ".7aa0c862.css"
})()
// ...

Notice the runtime.undefine.css. Also, this is without a frontend to actually test the bundle in a browser - but maybe it’s enough to find the issue.

When running npm run build it will dump the config to the console.

console.log(util.inspect(config, {
    showHidden: false,
    depth: null,
}));

Top Results From Across the Web

How to Solve the Chunk Load Error in JavaScript - Rollbar

Whenever there's an error observed in dynamically fetching helper JavaScript files known as Chunks, a ChunkLoad Error is thrown.

React — Loading Chunk Failed Error | by Tushar Mohan

The only condition is that this promise should resolve to a module with a default export (the target component). const OurComponent = React.lazy ......

Webpack Code Splitting 'Loading chunk failed' error wrong file ...

When you use code splitting with React.lazy, sometimes a 'chunk load error loading chunk 4 failed in react' error will occur.

Retry Loading Failed Code Split Chunks

Something was causing a runtime error that would cause the entire app to crash and bubble up to my React error boundary. Looking...

Optimization - webpack

Tells webpack which algorithm to use when choosing chunk ids. ... the webpack process will not exit with an error code while this...