v4.0.0 of css-module has broken ability to use mini-css-extract-plugin with css modules.

• Operating System: Windows 10
• Node Version: 14.3.0
• NPM Version: 6.14.5
• webpack Version: 4.43.0
• mini-css-extract-plugin Version: 0.9.0

Expected Behavior

Continue to get named exports.

Actual Behavior

No named exports!

Code

// some-css.css
.some-class { color: red; }

// some-js.js
import { someClass } from './some-css'
console.log(someClass) // expected:  some generated class name

// webpack.config.js
// this is a snippet of the loader section
// also of note is that `new MiniCssExtractPlugin()` in the plugins section is also commented out.

{
  test: /\.css$/,
  use: [
    // MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: {
        sourceMap: true,
        esModule: true,
        modules: {
          namedExport: true,
          exportLocalsConvention: 'camelCaseOnly',
        },
      },
    },
  ],
},

After uncommenting MiniCssExtractPlugin.loader and new MiniCssExtractPlugin() in plugins section, the export no longer comes forward. The object returned from that entire module is {} and so the class names aren’t coming through.

How Do We Reproduce?

You can clone this repo : https://github.com/tswaters/css-loader-4-0-0-mini-extract-issue

The readme should be pretty self-explanatory – but

• npm start and you’ll see the index.js file console.logs undefined.
• comment out the mini-css-extract-plugin lines in webpack.config.js and try again, it will log out properly… but, no css file.
• git checkout ., git checkout old-version-of-css-loader, and npm ci – npm start will now output the class name properly, and the css is output

I’m not sure if If I’m missing some kind of configuration option with css-loader or if it’s a bug with mini-css-extract-plugin or some combination of configuration between these two modules that is breaking things…

I had a heck of a time just getting the exports to work properly again under v4.0.0 – but can’t seem to get mini-css-extract-plugin to not interfere with the names exports showing up in generated bundle.

[alexander-akait]

@tswaters sometimes using search is not bad idea 😄

[alexander-akait]

@gpoitch we keep this issue in css-loader because it can potential change output, don’t worry it will be implemented in near future