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

  • 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

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 18 (11 by maintainers)

Most upvoted comments

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

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!

Thanks I will look at this tomorrow