Mini-css-extract-plugin: chunk loading issue when using a runtime chunk

[thasmo]

• 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.

[alexander-akait]

Please create reproducible test repo

[thasmo]

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

[thasmo]

Also; the 666 looks "suspicious". 🤔

[alexander-akait]

Thanks I will look at this tomorrow, I think it is bug on our side

[sokra]

I think I have a fix for that locally.

[wintercounter]

Any updates on this? I also have the same issue, please see the above mentioned issue. I don't know if it helps, what I noticed if I don't give name to my cacheGroup, compilation will succeed without merging CSS.

[alexander-akait]

Any updates on this?

No, https://blog.sindresorhus.com/issue-bumping-e3b9740e2a0

[wintercounter]

Come on, I also provided extra info on the issue, does it make any difference if I remove my first sentence?!

[alexander-akait]

@wintercounter just create example of the problem, it will help to check your problem is the same + we will add tests to avoid future regressions

[wintercounter]

The repro is the same basically as @thasmo described.

https://github.com/wintercounter/repro-webpack-css-merge

Requirements:

• runtime: 'single'
• have name specified for the cache group

• Seems like the issue comes up when using dynamic modules. Without that import() it's all good.
• Specifying name: The merged CSS is actually created, but the error is causing our apps to fail.
• Not specifying name: gets rid of the error, however CSS won't be merged anymore, it'll be loaded as separate chunks.
• I used production mode.
• Added html-webpack-plugin, but without it there is no difference.

[alexander-akait]

Thanks

[gson88]

I seem to have this problem as well. Updated to Webpack 5 recently and my application stopped working.

When removing "[fullhash]" from the output filename, it starts working again.

Works:
new MiniCssExtractPlugin({ filename: '[name].css' })

Does not work:
new MiniCssExtractPlugin({ filename: '[name]-[fullhash].css' })

[alexander-akait]

Yep, bug, I will look at this in near future, but if you have time you can send a fix, I don't think bug is hard

[smitty3268]

I'm running into what seems like a similar issue, though a few of the details are different.

Requirements:

• runtime: 'single'
• have name specified for the cache group
• the test in the cachegroup results in no matching files (and it's only looking for css files, like this: test: /.css/,)

The result is loading my app tries to load a undefined.undefined.js file that doesn't exist. Note that it's a js file, not css. If there are files matching the test then it correctly generates the css file and there is no js file requested. Removing the name from the cache group fixes it.

[alexander-akait]

@wintercounter your problem solved by updating webpack and mini-css-extract-plugin to the latest versions, I think @smitty3268 and @gson88 issues resolved too

[alexander-akait]

Original issue has two parts - need update webpack to the latest version and we fixed edge cases with undefined and bloated runtime in master (I think do release tomorrow, want to fix it https://github.com/webpack/webpack/issues/12489), anyway if somebody will have these problem, feel free to open a new issue, thanks for help