Misleading error, when used with `html-webpack-plugin`

• Operating System: macOS 10.15.2
• Node Version: v10.17.0
• NPM Version: 6.11.3
• webpack Version: webpack@4.41.5 webpack-cli@3.3.10
• mini-css-extract-plugin Version: mini-css-extract-plugin@0.9.0

Expected Behavior

Error thrown that lead to something meaningful (still not sure what actually goes wrong)

Actual Behavior

Thrown the error in some third-party lib

% npm run build -- --mode development

> example@1.0.0 build /Users/user/foo
> webpack "--mode" "development"

/Users/user/foo/node_modules/neo-async/async.js:16
    throw new Error('Callback was already called.');
    ^

Error: Callback was already called.
    at throwError (/Users/user/foo/node_modules/neo-async/async.js:16:11)
    at /Users/user/foo/node_modules/neo-async/async.js:2818:7
    at process._tickCallback (internal/process/next_tick.js:61:11)

Code

https://gist.github.com/ogonkov/2e23941414d6f0b3d5328bd80cba5674

How Do We Reproduce?

1. Checkout gist above
2. npm i
3. npm run build

[klesun]

CSS-related issues in html-webpack-plugin:

it’s probably mini-css-extract-plugin issue

Issues in mini-css-extract-plugin:

it’s probably html-webpack-plugin issue

[geonanorch]

Hit that issue as well, cost me a few hours already 😦 Thanks @ogonkov for reporting with reproducer.

@klesun a viable workaround (works for me) might be to replace MiniCssExtractPlugin by a simple file-loader :

      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'file-loader',
            options: {
              esModule: false,
            },
          },
          'extract-loader',
          {
            loader: 'css-loader',
            options: {
              esModule: false,
            },
          }
        ],
      },

If you also have regular JS imports then of course 2 distinct CSS rules are required.

UPDATE: just found that stackoverflow entry… 😉 Hopefully still useful to have the workaround detailed here.