Plugin crashes when using in a repo with webpack 4 and webpack 5

[scinos]

• Operating System: macOS 10.15.7
• Node Version: v15.3.0
• Yarn Version: 1.22.4
• webpack Version: 4.44.2 and 5.10.3
• mini-css-extract-plugin Version: 1.3.3

Expected Behavior

It can bundle my app without crashing.

Actual Behavior

Crashes with:

$ webpack
[webpack-cli] TypeError: Cannot read property 'ensureChunkHandlers' of undefined
    at /Users/sergio/src/test/mini-css-extract-plugin-bug/node_modules/mini-css-extract-plugin/dist/index.js:322:88
    at Hook.eval [as call] (eval at create (/Users/sergio/src/test/mini-css-extract-plugin-bug/app/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (/Users/sergio/src/test/mini-css-extract-plugin-bug/app/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/Users/sergio/src/test/mini-css-extract-plugin-bug/app/node_modules/webpack/lib/Compiler.js:987:30)
    at /Users/sergio/src/test/mini-css-extract-plugin-bug/app/node_modules/webpack/lib/Compiler.js:1029:29
    at Hook.eval [as callAsync] (eval at create (/Users/sergio/src/test/mini-css-extract-plugin-bug/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/sergio/src/test/mini-css-extract-plugin-bug/app/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.compile (/Users/sergio/src/test/mini-css-extract-plugin-bug/app/node_modules/webpack/lib/Compiler.js:1024:28)
    at /Users/sergio/src/test/mini-css-extract-plugin-bug/app/node_modules/webpack/lib/Compiler.js:471:12
    at Compiler.readRecords (/Users/sergio/src/test/mini-css-extract-plugin-bug/app/node_modules/webpack/lib/Compiler.js:866:11)

How Do We Reproduce?

See reproduction repo in https://github.com/scinos/mini-css-extract-plugin-bug

Description

This is what I think it is happening:

In a monorepo with multiple versions of webpack, depending on where mini-css-extract-plugin physically is, it can fail. Example:

// Package structure
<root>
    node_modules/
        [email protected]
        [email protected].
    app/
        node_modules/
            [email protected]

Note that both <root> and app depend on [email protected]., but the package manager hoists it to a common location. Because how the node module resolution algorithm works, this setup is valid (and in fact, quite common for monorepos).

Now imagine a webpack compilation inside app that uses new MiniCssExtractPlugin() (details about what the config does are not relevant). This is what happens:

• A new webpack 5 compilation is started, it loads MiniCssExtractPlugin
• The plugin imports import webpack from 'webpack'; (https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/src/index.js#L3). As the plugin resides in <root>/node_modules/mini-css-extract-plugin, it loads <root>/node_modules/webpack which is webpack 4
• Later, the plugin checks if the compiler was created using webpack 4 (https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/src/index.js#L106). It wasn't, so it assumes webpack 5.
• Later the plugin does the equivalent of (edited for example, code in https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/src/index.js#L486):

  if (!isWebpack4) {
     doStuff(webpack.RuntimeGlobals.ensureChunkHandlers)
  }
  

• Crashes because isWebpack4===false, but webpack does point to [email protected]

[alexander-akait]

@scinos Can we close, yep, in some situation it will be broken, but we can fix it only dropping webpack@4

[alexander-akait]

Found a fix #698