Misleading `mini-css-extract-plugin` error, see webpack-contrib/mini-css-extract-plugin#646

README.md

CSS Modules + HTMLWebpackPlugin

npm i
npm run build -- --entry ./index.js

Expected results

HTML emitted with <div class="<some css module hashed classname>"> and css chunk that inserted to html head.

Actual results

HTML emmited with <div class=""> and no css chunk at all.

index.ejs

<div class="<%= require('./item.css').item %>"></div>

index.js

// Just to make sure webpack is build something

item.css

.item {
    color: red;
}

package.json

{
  "private": true,
  "name": "example",
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "css-loader": "^5.0.0",
    "html-webpack-plugin": "^5.0.0-alpha.10",
    "mini-css-extract-plugin": "^1.2.1",
    "webpack": "^5.4.0",
    "webpack-cli": "^4.1.0"
  }
}

webpack.config.js

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

module.exports = {
    mode: 'development',
    devtool: false,

    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    }
                ]
            }
        ]
    },

    plugins: [
        new HTMLWebpackPlugin({
            template: 'index.ejs'
        }),
        new MiniCssExtractPlugin(),
    ]
};

@ogonkov, you sure you don't have a mistake here at class="<%= require('./item.css').item %>"? I'm not familliar with this format, but isn't it supposed to be something like style="<%= require('./item.css').item %>", with style attribute, not class?

Just intuitively, when you are taking .item field from a css file, I would expect it to return css properties of this selector, not a class name...

@klesun nope, with modules: true it returns JSON with hashed classes of CSS file.

hm, ok, never mind then