question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`webpackVersion` check doesn't work if multiple versions of webpack are in use

See original GitHub issue
  • 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

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:18 (11 by maintainers)

github_iconTop GitHub Comments

1reaction
marcelgerbercommented, Oct 24, 2020

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

1reaction
marcelgerbercommented, Oct 23, 2020

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!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Get " a different version of webpack was detected higher up in ...
However, a different version of webpack was detected higher up in the tree: C:\Users\USER\node_modules\webpack (version: 4.43.0) Manually ...
Read more >
To v5 from v4 - webpack
This guide aims to help you migrating to webpack 5 when using webpack directly. If you are using a higher level tool to...
Read more >
Module Bundling with Webpack - LearnHowToProgram.com
Whenever we want npm to install a specific version of a dependency we add the version number to the installation command. So by...
Read more >
A Guide to Managing Webpack Dependencies - Toptal
If we want to find out which version of React we use, we can add console.log(React.version) in the source code. Focus on Development,...
Read more >
fork-ts-checker-webpack-plugin - npm
If you depend on TypeScript 2.1 - 2.6.2, please use version 4 of the plugin. If you depend on Webpack 4, TypeScript 2.7...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found