How to get mini-css-extract-plugin to work with webpack 5?

Question

I am trying to extract the css files in my library. I've read the way to do this is using mini-css-extract-plugin.

Am I doing something wrong? Is there another way to extract the css files for my library?

Below I've created a simple test project using the same files provided on https://webpack.js.org/plugins/mini-css-extract-plugin

The below example fails in webpack 5 but works fine in webpack 4.

style.css

body {
  background: green;
}

index.js

import './style.css';

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "src/component.js",
  "dependencies": {},
  "devDependencies": {
    "css-loader": "^5.0.1",
    "mini-css-extract-plugin": "^1.3.5",
    "webpack": "^5.19.0",
    "webpack-cli": "^4.4.0"
  },
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "author": "",
  "license": "ISC"
}

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    index: './index.js'
  },
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};

ERROR

$ npm run build

> [email protected] build C:\Users\U708478\LAS\1CARI\Wells.Carina.Core.Blackbox\Web\test
> webpack --config webpack.config.js

assets by status 2.12 KiB [cached] 1 asset
runtime modules 657 bytes 3 modules
cacheable modules 60 bytes
  ./index.js 21 bytes [built] [code generated]
  ./style.css 39 bytes [built] [code generated] [1 error]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in ./style.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:\Users\U708478\LAS\1CARI\Wells.Carina.Core.Blackbox\Web\test\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:119:10)
    at C:\Users\U708478\LAS\1CARI\Wells.Carina.Core.Blackbox\Web\test\node_modules\webpack\lib\javascript\CommonJsChunkFormatPlugin.js:30:19
    at Hook.eval [as call] (eval at create (C:\Users\U708478\LAS\1CARI\Wells.Carina.Core.BlackBox\Web\test\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:5:1)
    at Hook.CALL_DELEGATE [as _call] (C:\Users\U708478\LAS\1CARI\Wells.Carina.Core.BlackBox\Web\test\node_modules\tapable\lib\Hook.js:14:14)
    at Compiler.newCompilation (C:\Users\U708478\LAS\1CARI\Wells.Carina.Core.BlackBox\Web\test\node_modules\webpack\lib\Compiler.js:992:30)
    at C:\Users\U708478\LAS\1CARI\Wells.Carina.Core.BlackBox\Web\test\node_modules\webpack\lib\Compiler.js:1035:29
    at Hook.eval [as callAsync] (eval at create (C:\Users\U708478\LAS\1CARI\Wells.Carina.Core.BlackBox\Web\test\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:4:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\U708478\LAS\1CARI\Wells.Carina.Core.BlackBox\Web\test\node_modules\tapable\lib\Hook.js:18:14)
    at Compiler.compile (C:\Users\U708478\LAS\1CARI\Wells.Carina.Core.BlackBox\Web\test\node_modules\webpack\lib\Compiler.js:1030:28)
    at Compiler.runAsChild (C:\Users\U708478\LAS\1CARI\Wells.Carina.Core.BlackBox\Web\test\node_modules\webpack\lib\Compiler.js:497:8)
 @ ./index.js 1:0-21

webpack 5.18.0 compiled with 1 error and 1 warning in 552 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `webpack --config webpack.config.js`
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:

Eavesdrop

Answer 1

Updating mini-css-extract-plugin to webpack 5 is still in progress: https://github.com/Automattic/wp-calypso/projects/100#card-51415407

Eavesdrop

The link in this answer seems unrelated to the mini-css-extract-plugin – Consort

Answer 2

The mini-css-extract-plugin is now compatible with Webpack 5, starting with v2.0.0

Consort

Answer 3

Webback team says: 'Note that if you import CSS from your webpack entrypoint or import styles in the initial chunk, mini-css-extract-plugin will not load this CSS into the page. Please use html-webpack-plugin for automatic generation link tags or create index.html file with link tag'.

As a temporal solution to make mini-css-extract-plugin work with your Webpack 5 project, I may recommend to try lower your "mini-css-extract-plugin" version to, let's say, ^1.3.9.

Typewrite