Cannot load CSS module file which has a class named "default" after 7.x upgrade

[EvHaus]

Bug report

After upgrading from 6.x to 7.x, some of my CSS modules files are failing to get processed. My webpack module rule is defined as:

{
  test: /\.module\.css$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: {
          exportLocalsConvention: 'as-is',
          namedExport: false,
        },
      },
    },
  ],
}

Actual Behavior

If my CSS modules file has .default {} CSS class defined, webpack fails to generate the build with this error:

ERROR in ../myproject/myfile.module.css (../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[7].use[1]!../myproject/myfile.module.css) 64:7
Module parse failed: Duplicate export 'default' (64:7)
File was processed with these loaders:
 * ../../node_modules/css-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| export var removeButton = `myfile__removeButton--tj82C`;
| export var removeButtonCopy = `myfile__removeButtonCopy--Y_1QO`;
> export default ___CSS_LOADER_EXPORT___;

Expected Behavior

Ideally the same behaviour as 6.x where I can have my CSS classes defined with any name.

How Do We Reproduce?

Add the module rule configuration pasted above to your webpack config. Then create and import the following CSS file:

# myfile.module.css
.default { background: red }

Via some JavaScript asset:

# myfile.js
import styles from './myfile.module.css';

Run the webpack build via: webpack --config ./webpack.config.js.

Please paste the results of npx webpack-cli info here, and mention other relevant information

  System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 93.02 MB / 32.00 GB
  Binaries:
    Node: 20.12.0 - ~/.nvm/versions/node/v20.12.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v20.12.0/bin/yarn
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.0/bin/npm
  Browsers:
    Chrome: 123.0.6312.107
    Chrome Canary: 125.0.6408.0
    Edge: 123.0.2420.81
    Firefox: 123.0
    Safari: 17.4.1

[alexander-akait]

You can't use default as a class name, it is a limitation, because we have default export in ECMA modules, we need to document it

[alexander-akait]

Fix - #1590, I improved logic and now we rename default class to _default automatically to avoid crash, also updated docs

[alexander-akait]

Anyway I added test case with:

{
  test: /\.module\.css$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: {
          exportLocalsConvention: 'as-is',
          namedExport: false,
        },
      },
    },
  ],
}

And can't reproduce the problem, maybe you forget to apply these options in another place

Anyway feel free to feedback (or provide reproducible test repo)

[EvHaus]

@alexander-akait Thanks for making that change. Can you help me understand why this change was made in v7? Since a CSS Modules file is returned as an object I don't understand how a class called default would ever conflict with any ES keywords. It worked just fine in v6.

I would understand if the class name was something like .isPrototypeOf or .constructor, but .default isn't one of the reserved keywords for JS objects:

[alexander-akait]

You should not have problems with namedExport: false,, I added test and all everything fine, maybe you have more loaders/plugins, can you create minimum reproducible test repo?

[EvHaus]

Ah, you're right. My bad. I saw the docs still said .default gets remapped to _default, but it's not the case with namedExport: false.