Concatenating multiple css files breaks js file

Bug report

What is the current behavior? I am trying to extract multiple css files from js files and concatenate it into one css file. I use this documentation https://webpack.js.org/plugins/mini-css-extract-plugin/#extracting-all-css-in-a-single-file. The css files extracted and concatenated well, but after it, js files from which it extracted breaks, i.e. it stops executing at all.

If the current behavior is a bug, please provide the steps to reproduce. I created repo and left only css-loader and optimization section. When optimization section commented out, js correctly executed and in console ‘it works’ appears. But when optimization uncommented, js doesn’t executed and console stays empty Steps to reproduce

git clone https://github.com/felixcatto/webpack_bug.git
cd webpack_bug
npm i
npx webpack-dev-server

What is the expected behavior? Expected result: js at index.js should be executed, i.e. you should see ‘it works’ in console Actual result: js doesn’t executed, because you don’t see anything in console

Other relevant information: webpack version: 4.44.1 Node.js version: 12.18.2 Operating System: ubuntu, 16.04

---

This issue was moved from webpack/webpack#11436 by @evilebottnawi. Original issue was by @felixcatto.

[alexander-akait]

Yep, fixed in webpack@5 and in the latest mini-css-extract-plugin version, index was created because you use name: 'index',, name should have extension at the end of file index.css

And yes, using type: 'css/mini-extract', is better then test I will update docs

[ik9999]

Try this solution: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/408#issuecomment-589649120