Mini-css-extract-plugin: Webpack 5 support

[aaarichter]

Feature Proposal

Webpack is currently in v5.0.0-beta7. Can mini-css-extract-plugin be made compatible?

Feature Use Case

Mini-css-extract-plugin is essential to extract css via webpack.

At the moment I'm seeing the following error:

⬢ webpack: Module build failed (from node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:115:10)
    at compiler.hooks.thisCompilation.tap.compilation (node_modules/webpack/lib/node/NodeTemplatePlugin.js:33:42)
    at Hook.eval (<anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (node_modules/webpack/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (node_modules/webpack/lib/Compiler.js:857:30)
    at hooks.beforeCompile.callAsync.err (node_modules/webpack/lib/Compiler.js:898:29)
    at Hook.eval [as callAsync] (<anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.compile (node_modules/webpack/lib/Compiler.js:893:28)
    at Compiler.runAsChild (node_modules/webpack/lib/Compiler.js:436:8)
    at Object.pitch (node_modules/mini-css-extract-plugin/dist/loader.js:129:17)

[alexander-akait]

Duplicate https://github.com/webpack/webpack/issues/9802#issuecomment-556901812

[vamshia03]

Hello @aaarichter, how did you fix this error? I received the same kind of error but it was for terser-webpack-plugin.

[trullock]

@evilebottnawi What's the solution to this?

[alexander-akait]

Update mini-css-extract-plugin to the latest version

[alexander-akait]

terser-webpack-plugin supports only webpack@5, please read what is write your package manager

[raman-kazhadub]

the same issue for me
webpack: 5.8.0
mini-css-extract-plugin: 1.3.1

[raman-kazhadub]

@alexander-akait, @aaarichter , could you help me with the bug above please?

[stupidmonke]

I was having this same issue and it ended up being a capitalization issue with the file structure I was calling npm run watch from in the Terminal client in Visual Studio Code, so '/estimates/ instead of '/Estimates/'

[alexander-akait]

@raman-kazhadub Please create reproducible test repo

[richardlawley]

The capitalisation issue mentioned by @stupidmonke was my problem too when running from Windows. My code lives in C:\Code\Personal... but I had done cd C:\code\Personal... and run npm run build from there. Doing cd with the correct capitalisation made the problem go away for me.

[dhayzon]

Thanks @stupidmonke and @richardlawley

C:\xampp\htdocs\plantilla\themes> npm run build

produce error
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: The 'compilation' argument must be an instance of Compilation

C:\xampp\htdocs\plantilla\Themes> npm run build
works fine
webpack 5.11.0 compiled successfully in 17241 ms

[alexander-akait]

@dhayzon Can you provide reproducible test repo?

[nstringham]

I can confirm this was also my problem.

I originally called the folder SkyCrypt-themer but then I renamed it to SkyCrypt-Themer using right-click > Rename in windows file explorer

I was able to fix it by moving the files inside SkyCrypt-Themer somewhere else then deleting the folder then creating a folder called SkyCrypt-Themer and moving the files back to it. I did all this from the windows file explorer gui

my OS is Windows 10 Version 20H2 (OS Build 19042.685)

[alexander-akait]

windows fs is case-sensitive, so Web and web are different directories, file.ext and File.ext are different files

[richardlawley]

windows fs is case-sensitive, so Web and web are different directories, file.ext and File.ext are different files

This isn't quite true. While filenames preserve case, allowing you to name something file.ext or File.ext, the underlying OS is not. This means that you cannot create file.ext and File.ext in the same location, and you can access file.ext as File.ext, FiLe.ExT and FILE.EXT without any problems.

Similarly with directories, you can create C:\Code and access it as C:\code, C:\CODE and C:\cOdE. When you cd into a directory in the cmd prompt in current Windows, it automatically corrects the prompt and current directory to match the capitalisation of the actual directory. However, the powershell prompt does not - if you cd C:\code, the prompt will show C:\code even though you are inside C:\Code. This is the origin of the problem we've been mentioning.

I did try to find the cause of this myself but don't know enough node. My guess is that something inside either this library or a dependency is using a case sensitive comparison for filenames rather than asking the OS to do it.

[alexander-akait]

This means that you cannot create file.ext and File.ext in the same location, and you can access file.ext as File.ext, FiLe.ExT and FILE.EXT without any problems.

Didn't I say the same thing?

I don't understand what is the problem create simple reproducible test repo and I will say what is wrong

[alexander-akait]

Or please provide full stack of the error, I don't know even lines

[richardlawley]

The stack trace had already been provided by someone else earlier on, but here you go...

ERROR in ./src/index.css (./node_modules/mini-css-extract-plugin/dist/loader.js??ruleSet[1].rules[1].use[1]!./node_modules/css-loader/dist/cjs.js!./src/index.css)
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: The 'compilation' argument must be an instance of Compilation
at getCompilationHooks (C:\Temp\MINI-CSS-CASE-PROBLEM\node_moduleswebpack\lib\javascript\JavascriptModulesPlugin.js:119:10)
at C:\Temp\MINI-CSS-CASE-PROBLEM\node_moduleswebpack\lib\javascript\CommonJsChunkFormatPlugin.js:30:19
at Hook.eval [as call] (eval at create (C:\Temp\mini-css-case-problem\node_modules\tapable\lib\HookCodeFactory.js:19:10), :5:1)
at Hook.CALL_DELEGATE [as _call] (C:\Temp\mini-css-case-problem\node_modules\tapable\lib\Hook.js:14:14)
at Compiler.newCompilation (C:\Temp\mini-css-case-problem\node_moduleswebpack\lib\Compiler.js:987:30)
at C:\Temp\mini-css-case-problem\node_moduleswebpack\lib\Compiler.js:1029:29
at Hook.eval [as callAsync] (eval at create (C:\Temp\mini-css-case-problem\node_modules\tapable\lib\HookCodeFactory.js:33:10), :13:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Temp\mini-css-case-problem\node_modules\tapable\lib\Hook.js:18:14)
at Compiler.compile (C:\Temp\mini-css-case-problem\node_moduleswebpack\lib\Compiler.js:1024:28)
at Compiler.runAsChild (C:\Temp\mini-css-case-problem\node_moduleswebpack\lib\Compiler.js:495:8)
@ ./src/index.css 2:12-170 9:17-24 13:15-29
@ ./src/index.js 1:0-21

Simple repro at https://github.com/richardlawley/mini-css-case-problem. Must be run from a powershell prompt:

git clone https://github.com/richardlawley/mini-css-case-problem
cd MINI-CSS-CASE-PROBLEM
npm install
npm run build

If you run from a cmd prompt, or use the correct capitalisation when you cd, the project will build fine.

[alexander-akait]

@richardlawley strange, can reproduce, powershell versions:

Name                           Value
----                           -----
PSVersion                      5.1.17134.858
PSEdition                      Desktop
PSCompatibleVersions           {1.0, 2.0, 3.0, 4.0...}
BuildVersion                   10.0.17134.858
CLRVersion                     4.0.30319.42000
WSManStackVersion              3.0
PSRemotingProtocolVersion      2.3
SerializationVersion           1.1.0.1

[alexander-akait]

Very very weird

[richardlawley]

can reproduce

Is that a typo, you can reproduce or can't? If you can't reproduce, can you confirm your prompt includes the capitalisation you type in rather than what the directory was created as? e.g.

PS C:\Temp> mkdir testdir
PS C:\Temp> cd TeStDiR
PS C:\Temp\TeStDiR>

My version of powershell is slightly newer, but I doubt that's the cause

$PSVersionTable

Name                           Value
----                           -----
PSVersion                      5.1.19041.610
PSEdition                      Desktop
PSCompatibleVersions           {1.0, 2.0, 3.0, 4.0...}
BuildVersion                   10.0.19041.610
CLRVersion                     4.0.30319.42000
WSManStackVersion              3.0
PSRemotingProtocolVersion      2.3
SerializationVersion           1.1.0.1

I've also checked node versions, I was running an old LTS (12.18.4) but I've updated to current LTS (14.15.3) and still have the problem.

[alexander-akait]

@richardlawley Do you have stats output? Can you provide? Very similar to what is used webpack@4 (maybe we have bug to detect webpack@5)

[alexander-akait]

Is that a typo, you can reproduce or can't? If you can't reproduce, can you confirm your prompt includes the capitalisation you type in rather than what the directory was created as? e.g.

Yes

[richardlawley]

@alexander-akait Sorry, not sure what stats output is (just starting with webpack). How do I get this?

[alexander-akait]

Example for v4, for v5 it will be different but also contains some information

Version: webpack 4.26.1
Time: 187ms
Built at: 12/22/2020 6:13:12 PM
  Asset      Size  Chunks             Chunk Names
main.js  15.7 KiB    main  [emitted]  main
Entrypoint main = main.js
[./node_modules/mini-css-extract-plugin/dist/loader.js?!./node_modules/css-loader/dist/cjs.js!./src/index.css] ./node_modules/mini-css-extract-plugin/dist/loader.js??ref--5-1!./node_modules/css-loader/dist/cjs.js!./src/index.css 1.29 KiB {main} [built] [failed] [1 error]
[./src/index.css] 391 bytes {main} [built]
[./src/index.js] 43 bytes {main} [built]
    + 1 hidden module

[richardlawley]

Oh sorry.

From working build...

PS C:\Temp\mini-css-case-problem> npm run build

> [email protected] build C:\Temp\mini-css-case-problem
> webpack --mode development --progress

99% done plugins webpack-cli[webpack-cli] Compilation finished
asset main.js 14.7 KiB [emitted] (name: main)
asset style.css 40 bytes [compared for emit] (name: main)
Entrypoint main 14.7 KiB = style.css 40 bytes main.js 14.7 KiB
runtime modules 931 bytes 4 modules
code generated modules 7.15 KiB (javascript) 39 bytes (css/mini-extract) [code generated]
  modules by path ./src/*.css 448 bytes (javascript) 39 bytes (css/mini-extract)
    ./src/index.css 409 bytes [built] [code generated]
    ./node_modules/mini-css-extract-plugin/dist/loader.js??ruleSet[1].rules[1].use[1]!./node_modules/css-loader/dist/cjs.js!./src/index.css 39 bytes [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./src/index.css 39 bytes [code generated]
  ./src/index.js 43 bytes [built] [code generated]
  ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]
webpack 5.11.0 compiled successfully in 652 ms

From failed build:

PS C:\Temp\MINI-CSS-CASE-PROBLEM> npm run build

> [email protected] build C:\Temp\MINI-CSS-CASE-PROBLEM
> webpack --mode development --progress

99% done plugins webpack-cli[webpack-cli] Compilation finished
asset main.js 16.1 KiB [emitted] (name: main)
runtime modules 931 bytes 4 modules
cacheable modules 7.15 KiB
  modules by path ./src/*.css 448 bytes
    ./src/index.css 409 bytes [built] [code generated]
    ./node_modules/mini-css-extract-plugin/dist/loader.js??ruleSet[1].rules[1].use[1]!./node_modules/css-loader/dist/cjs.js!./src/index.css 39 bytes [built] [code generated] [1 error]
  ./src/index.js 43 bytes [built] [code generated]
  ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]

ERROR in ./src/index.css (./node_modules/mini-css-extract-plugin/dist/loader.js??ruleSet[1].rules[1].use[1]!./node_modules/css-loader/dist/cjs.js!./src/index.css)
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: The 'compilation' argument must be an instance of Compilation
    at getCompilationHooks (C:\Temp\MINI-CSS-CASE-PROBLEM\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:119:10)
    at C:\Temp\MINI-CSS-CASE-PROBLEM\node_modules\webpack\lib\javascript\CommonJsChunkFormatPlugin.js:30:19
    at Hook.eval [as call] (eval at create (C:\Temp\mini-css-case-problem\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (C:\Temp\mini-css-case-problem\node_modules\tapable\lib\Hook.js:14:14)
    at Compiler.newCompilation (C:\Temp\mini-css-case-problem\node_modules\webpack\lib\Compiler.js:987:30)
    at C:\Temp\mini-css-case-problem\node_modules\webpack\lib\Compiler.js:1029:29
    at Hook.eval [as callAsync] (eval at create (C:\Temp\mini-css-case-problem\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Temp\mini-css-case-problem\node_modules\tapable\lib\Hook.js:18:14)
    at Compiler.compile (C:\Temp\mini-css-case-problem\node_modules\webpack\lib\Compiler.js:1024:28)
    at Compiler.runAsChild (C:\Temp\mini-css-case-problem\node_modules\webpack\lib\Compiler.js:495:8)
 @ ./src/index.css 2:12-170 9:17-24 13:15-29
 @ ./src/index.js 1:0-21

webpack 5.11.0 compiled with 1 error in 604 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `webpack --mode development --progress`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\richard.lawley\AppData\Roaming\npm-cache\_logs\2020-12-22T15_33_37_285Z-debug.log

[alexander-akait]

@richardlawley Can you got to C:\Temp\MINI-CSS-CASE-PROBLEM\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js to 119 line and write:

console.log(compilation);

// No need, already in code as you see
if (!(compilation instanceof Compilation)) {
  throw new TypeError(
    "The 'compilation' argument must be an instance of Compilation"
  );
}

[richardlawley]

Unfortunately due to https://github.com/nodejs/node/issues/35730, trying to log compilation also crashes :(

Just trying to go back to a version of node which doesn't have this problem.

[richardlawley]

Perhaps a little bit of progress. Returned to 12.8.4. console.log(compilation) in both working and non-working returns:

Compilation {
    ...
}

I also tried some additional logging - console.log(compilation.name) and console.log(compilation.constructor.name). In both cases, compilation.constructor.name was Compilation, but there was a difference between compilation.name - in the working version it was undefined, and in the broken one it was mini-css-extract-plugin C:\Temp\MINI-CSS-CASE-PROBLEM\node_modules\css-loader\dist\cjs.js!C:\Temp\MINI-CSS-CASE-PROBLEM\src\index.css.

I can also now reproduce the problem in vs code, but I'm not really any wiser as to why it happens or where to look. I suspect the problem is not something directly in this library, but further up the chain.

[alexander-akait]

there was a difference between compilation.name - in the working version it was undefined

hm, it should be not undefined, maybe you can write output logs in file and update them?

[dthpth]

Can this be a kind of a bug in Node.js for Windows?
Made a small demo repo here: win-node-require-casing-issue

@richardlawley, As a workaround for the original issue: new modern PowerShell 7 does not allow to cd in wrong casing

[alexander-akait]

@dthpth yes, looks like bug on Node.js side, because no problems on linux and windows, does somebody open an issue in Node.js?

[dthpth]

unfortunately, they said this is an "expected and documented behavior": https://github.com/nodejs/node/issues/34597#issuecomment-667646254

[alexander-akait]

bad, we should avoid using instance of and using plugin.constructor === webpack.HotModuleReplacementPlugin (just example), anyway use instanceof only in one places and this problems should not be exists here

[alexander-akait]

To be honestly I think it is powershell bug, because no problems on linux/macos/windows with cmd

[alexander-akait]

@richardlawley updating powershell is help?

[Sigizmund2012]

This is definitely a PowerShell bug. I upgraded to 7.1.0 and the error went away https://github.com/PowerShell/PowerShell/releases/tag/v7.1.0

[alexander-akait]

Great, thanks for feedback

[FC-jan]

I encountered the same issue on mac os x. Folder names were all correct case-wise.

I had MiniCssExtractPlugin configured to use a filename pattern. Adding a chunkFilename helped in my case.

My example is too complicated to post, and I don't have time to extract it from my project.
Just in case, non-powershell users stumble across this.

[jrj2211]

I'm also having this issue though I think I'm trying something different than everyone else here. I originally was using the webpack-dev-server and that was compiling just fine. I wanted to still have my API work without starting another server so I switched to webpack-dev-middleware. Everything else compiles just fine except the CSS.

I read through all the comments here and TLDR:

• Capitalization issue: My pathing looks correct, I've cd'd back into the folder numerous times to make sure the its not wrong
• Install PowerShell 7.1: Same issue
• Added chunkFilename: Same issue
• Upgraded from node 12 to 14 (LTS): Weird issue about something being null
• Upgraded from node 14 to 15 (Current): Same compilation issue

I opened compilation and logged it - same as person above:

Compilation {
...
}

If I print out compilation.constructor.name I get back the following: Compilation. Not sure how its not an instance of compilation when it seems to be.

If I remove the instanceof check in JavascriptModulesPlugin.js I then get the same issue in NormalModule.js (in webpack lib). Removing the check there then says the css successfully was generated

./app/css/app.css 50 bytes [built] [code generated]

That said, using the dev-middleware I don't actually see the css being inserted into my page like my compiled JS is. Not sure if that's a by product of bypassing the instanceof check or if MiniCssExtract doesn't play nice with dev-middleware's in memory files.

If I run it with my production webpack config the CSS generates without errors so for me it seems to just be a compatibility issue with the webpack-dev-middleware module.

I was having this issue originally with the html-webpack-plugin but their issues page said update to beta5 which I did and that fixed it. Not sure if what they did could be used to solve it in MiniCssExtract.

Update
I looked at html-webpack-plugin compilation hook code and they dont even check if its an instance of Compilation:

function getHtmlWebpackPluginHooks (compilation) {
  console.log(compilation instanceof Compilation);
  let hooks = htmlWebpackPluginHooksMap.get(compilation);
  // Setup the hooks only once
  if (hooks === undefined) {
    hooks = createHtmlWebpackPluginHooks();
    htmlWebpackPluginHooksMap.set(compilation, hooks);
  }
  return hooks;
}

Weird enough... compilation instanceof Compilation also returns false, same as JavascriptModulesPlugin.js in webpacks lib. Curious why they even check that when it doesn't seem to be an instance of it anymore.

[alexander-akait]

@jrj2211 Can you open an issue in webpack with reproducible test repo?

[jrj2211]

Sure thing, I'll work on making a simplified test repo tonight and create a bug report there.

[Christian24]

@alexander-akait & @jrj2211 any updates on this? Or any hints as to how to figure out what the problem is? I am running into the same issue:

• Windows
• Git Bash
• latest mini-css-extract-plugin
• casing seems to be correct
• Configuration:
  js new MiniCssExtractPlugin({ filename: "[name].[contenthash].css", }),
  I feel my issue is more related to linking as seen in https://github.com/webpack-contrib/mini-css-extract-plugin/issues/631

[jrj2211]

I haven't had time to continue looking at this but I did find a work around for my scenario. For me it builds fine in my production environment for some reason, but wasn't working with the webpack-dev-middleware server. I just made a dev config not use the mini css plugin and instead just the css-loader and style-loader. In my case, I realized there really wasn't a point to minify the css in dev. Sorry to not be more help.

Looking at other modules that have since updated to webpack 5, they don't use the methods provided by webpack like this module does. Just to test it out, I removed the checks in the webpack code and everything compiled fine so that's the only thing holding this up for some of us. Since there was an issue on webpacks github talking about the instanceof issue (linked earlier) and it doesn't seem like any action will be taken on it, I think this module would have to have a change to not use their methods.

[vladpoltorin]

very weird but resolved this by renaming project path to lowercased names

[brockduncan]

Definitely the capitalization issue in the path 🤦