Webpack 5 - TypeError: The 'compilation' argument must be an instance of Compilation

• Operating System: OSX Catalina 10.15.6
• Node Version: 14.11.0
• NPM Version: 6.14.8
• webpack Version: 5.1.3
• mini-css-extract-plugin Version: 1.1.1

Expected Behavior

• No Errors when including .scss files
• .scss files are transformed to css and output in dist directory

Actual Behavior

• Using MiniCssExtractPlugin.loader results in webpack errors for every .scss file:

“TypeError: The ‘compilation’ argument must be an instance of Compilation”

• Replacing MiniCssExtractPlugin.loader with 'style-loader' yields no errors and styles the application as intended, but css is not extracted (obviously). This leads me to suspect the issue has something to do with this plugin 🤔

Code

Versions:

"css-loader": "5.0.0",
"html-webpack-plugin": "5.0.0-alpha.6",
"mini-css-extract-plugin": "1.1.1",
"sass-loader": "10.0.3",
"style-loader": "2.0.0",
"webpack": "5.1.3",
"webpack-cli": "4.1.0",

Results in errors:

// weback config
plugins: [
    // ...
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
      chunkFilename: '[id].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(s)?css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
      // ...
    ]
  }

No errors, no extract:

// webpack config
 module: {
    rules: [
      {
        test: /\.(s)?css$/i,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      // ...
    ]
  }

Is there anything obvious from this configuration that could yield errors with the compilation argument? Has anybody seen this before? I’m working on creating a small repo to reproduce the issue, but if you see a stupid mistake in here or have clarifying questions for me, please ask right away!

Thanks very much for your help! 👍

[owap]

Looks like MiniExtractCssPlugin works fine as long as I don’t npm link to my library. I’ve got symlinks: false in the resolve section of my webpack config, but it still misbehaves.

I’ve worked around this issue for now by changing my webpack config to use style-loader in development and MiniCssExtractPlugin in production.

To clarify: MiniCssExtractPlugin works in both development and production modes as long as I don’t npm link to the library that lists MiniCssExtractPlugin as a dependency. If I run npm install and then start the app without linking, it works great. If you npm link, you get the compilation TypeErrors

[alexander-akait]

@Christian24 found solution, how we can solve it, so just wait the next patch release