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

[tswaters]

• 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]

It was written in the original issue https://github.com/webpack-contrib/css-loader/issues/1029, namedExport is not fully competed, no need new issues, it was implemented in near future

[tswaters]

Apologies, I didn't see that.

Might I suggest unmarking v4.0.0 as latest if it's not working 100% with the ecosystem?

I lost a good couple hours last night between npm i css-loader and the creation of this ticket.

[alexander-akait]

@tswaters sometimes using search is not bad idea :smile:

[gpoitch]

Came to find/file a similar issue. Seems like this issue should be reopened because mini-extract needs work to support this and https://github.com/webpack-contrib/css-loader/issues/1029 can be closed because that end was completed. Thanks for the work on this!

[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