Mini-css-extract-plugin: `webpackVersion` check doesn't work if multiple versions of webpack are in use

[MarcelGerber]

• Operating System: Windows 10
• Node Version: 12.13.1
• NPM Version: 6.14.8
• webpack Version: 5.0.0-rc.3 _and_ 4.44.1
• mini-css-extract-plugin Version: 0.11.3

My Setup

In my setup, the project itself is using Webpack 5 (RC) (https://github.com/owid/owid-grapher/pull/621), but we're also using Storybook which is using Webpack 4.

Expected Behavior

When running yarn build-storybook, mini-css-extract-plugin detects that it is not run with the project-wide Webpack install (5), but the Storybook-specific Storybook install (4), and set isWebpack4 accordingly.

Actual Behavior

Instead, mini-css-extract-plugin fails with this error:

(node:5543) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'includes' of undefined
    at MiniCssExtractPlugin.apply (/mnt/c/Users/marce/Programming/owid-grapher/node_modules/mini-css-extract-plugin/dist/index.js:87:42)
    at webpack (/mnt/c/Users/marce/Programming/owid-grapher/node_modules/@storybook/core/node_modules/webpack/lib/webpack.js:51:13)
    at /mnt/c/Users/marce/Programming/owid-grapher/node_modules/@storybook/core/dist/server/build-static.js:110:26
    at new Promise (<anonymous>)
    at compilePreview (/mnt/c/Users/marce/Programming/owid-grapher/node_modules/@storybook/core/dist/server/build-static.js:109:10)
    at buildPreview (/mnt/c/Users/marce/Programming/owid-grapher/node_modules/@storybook/core/dist/server/build-static.js:218:10)
    at buildStaticStandalone (/mnt/c/Users/marce/Programming/owid-grapher/node_modules/@storybook/core/dist/server/build-static.js:254:3)
(node:5543) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)

The error implies that the command indeed runs with Webpack 4, but mini-css-extract-plugin believes it to be Webpack 5 and sets isWebpack4 = false.

Possible solution

I don't know what a possible solution could be, but maybe it makes sense for compiler or some other field to contain a webpackVersion field to reliably detect the webpack version in use?
cc @sokra

[alexander-akait]

Maybe we can duck typing

[alexander-akait]

Anyway it should not happen, because other plugins use the same logic, something wrong with your env/setup

[alexander-akait]

Found, update webpack to latest rc, defaultSizeTypes exists only in rc.3

[MarcelGerber]

Found, update webpack to latest rc, defaultSizeTypes exists only in rc.3

I am also facing this issue with rc.4.

[alexander-akait]

@MarcelGerber Please create reproducible test repo, terser should failed too here

[MarcelGerber]

Hi @evilebottnawi, I've set up a demo project at https://github.com/MarcelGerber/webpack-demo.

In it, yarn webpack serve works fine, whereas yarn storybook fails with the error message.

[alexander-akait]

Thanks I will look at this tomorrow

[sokra]

For this to work plugin must avoid to import "webpack" at all. For that we maybe need to expose webpack as property of the Compiler...

[MarcelGerber]

For this to work plugin must avoid to import "webpack" at all. For that we maybe need to expose webpack as property of the Compiler...

Yep, I think so too.
When importing webpack, Node package hoisting may result in the plugin importing another version of webpack than what is actually used in that run.

[shobhitsharma]

@evilebottnawi Also, ran into this issue. Could you please suggest a workaround for it?

[alexander-akait]

Disable hoist for webpack

[alexander-akait]

Give me 10-15 minutes, I will try to fix it, should be easy

[alexander-akait]

@shobhitsharma @MarcelGerber Can you try https://github.com/webpack-contrib/mini-css-extract-plugin/releases/tag/v1.1.2

[shobhitsharma]

@evilebottnawi Thanks for quick action. I tested it just now, issue still persists. The webpack version printed 5.2.0 during debug, since there is no support for webpack 5 in storybook, this needs to be handled by their webpack configuration somehow. follow up: storybookjs/storybook#11326

[alexander-akait]

@shobhitsharma Can you create reproducible test repo?

[MarcelGerber]

Sadly, I have to report the same thing.
I've updated my demo of this issue with the latest webpack & plugin versions: https://github.com/MarcelGerber/webpack-demo

In it, yarn webpack serve works fine, whereas yarn storybook doesn't.

Thank you for looking into this, much appreciated!

[alexander-akait]

Please try again https://github.com/webpack-contrib/mini-css-extract-plugin/releases/tag/v1.2.0

[MarcelGerber]

Great, thank you, it's working now 👍 . (I get another error message now, but that one doesn't seem related to this plugin)