Error when importing module.css

[DavidHenri008]

Bug report

The newer v2.4.0 and v2.4.1 cause an error when importing css module.
However, everything works fine with v2.3.0.

Actual Behavior

I have a CSS module file.

// index.module.css

.filterLinesIcon {
  height: 15px;
  cursor: pointer;
}

I have a React file.

// index.js

import { PureComponent } from 'react';
import styles from './index.module.css';

export default class FilterLinesIcon extends PureComponent {
  render() {
    return (
      <svg
        className={styles.filterLinesIcon}
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 286.054 286.054"
      >
        <path d="M8.939 44.696h178.784a8.931 8.931 0 0 0 8.939-8.939V8.939A8.937 8.937 0 0 0 187.723 0H8.939C4.005 0 0 4.005 0 8.939v26.818c0 4.934 4.005 8.939 8.939 8.939zm268.176 35.757H8.939C4.005 80.453 0 84.457 0 89.392v26.818a8.937 8.937 0 0 0 8.939 8.939h268.176a8.931 8.931 0 0 0 8.939-8.939V89.392a8.936 8.936 0 0 0-8.939-8.939zM8.939 205.601h178.784a8.931 8.931 0 0 0 8.939-8.939v-26.818a8.931 8.931 0 0 0-8.939-8.939H8.939A8.937 8.937 0 0 0 0 169.844v26.818a8.937 8.937 0 0 0 8.939 8.939zm268.176 35.757H8.939A8.937 8.937 0 0 0 0 250.297v26.818a8.937 8.937 0 0 0 8.939 8.939h268.176a8.931 8.931 0 0 0 8.939-8.939v-26.818a8.931 8.931 0 0 0-8.939-8.939z" />
      </svg>
    );
  }
}

I have the default webpack config from Create React App.

// webpack.config.js

...

const getStyleLoaders = (webpackEnv, paths, cssOptions, preProcessor) => {
  const loaders = [
    isEnvDevelopment(webpackEnv) && require.resolve('style-loader'),
    isEnvProduction(webpackEnv) && {
      loader: MiniCssExtractPlugin.loader,
      // css is located in `static/css`, use '../../' to locate index.html folder
      // in production `paths.publicUrlOrPath` can be a relative path
      options: paths.publicUrlOrPath.startsWith('.') ? { publicPath: '../../' } : {},
    },
    {
      loader: require.resolve('css-loader'),
      options: cssOptions,
    },
    {
      // Options for PostCSS as we reference these options twice
      // Adds vendor prefixing based on your specified browser support in
      // package.json
      loader: require.resolve('postcss-loader'),
      options: {
        postcssOptions: {
          // Necessary for external CSS imports to work
          // https://github.com/facebook/create-react-app/issues/2677
          ident: 'postcss',
          plugins: [
            'postcss-flexbugs-fixes',
            [
              'postcss-preset-env',
              {
                autoprefixer: {
                  flexbox: 'no-2009',
                },
                stage: 3,
              },
            ],
            // Adds PostCSS Normalize as the reset css with default options,
            // so that it honors browserslist config in package.json
            // which in turn let's users customize the target behavior as per their needs.
            'postcss-normalize',
          ],
        },
        sourceMap: false,
      },
    },
  ].filter(Boolean);

...

module:{

...

          // "postcss" loader applies autoprefixer to our CSS.
          // "css" loader resolves paths in CSS and adds assets as dependencies.
          // "style" loader turns CSS into JS modules that inject <style> tags.
          // In production, we use MiniCSSExtractPlugin to extract that CSS
          // to a file, but in development "style" loader enables hot editing
          // of CSS.
          // By default we support CSS Modules with the extension .module.css
          {
            test: cssRegex,
            exclude: cssModuleRegex,
            use: getStyleLoaders(webpackEnv, paths, {
              importLoaders: 1,
              sourceMap: false,
              modules: {
                mode: 'icss',
              },
            }),
            // Don't consider CSS imports dead code even if the
            // containing package claims to have no side effects.
            // Remove this when webpack adds a warning or an error for this.
            // See https://github.com/webpack/webpack/issues/6571
            sideEffects: true,
          },
          // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
          // using the extension .module.css
          {
            test: cssModuleRegex,
            use: getStyleLoaders(webpackEnv, paths, {
              importLoaders: 1,
              sourceMap: false,
              modules: {
                mode: 'local',
                getLocalIdent: getCSSModuleLocalIdent,
              },
            }),
          },

...

I am getting the following error:

Attempted import error: './index.module.css' does not contain a default export (imported as 'styles').

Expected Behavior

I am expecting to get the same result as with v2.3.0, meaning being able to use the property filterLinesIcon from the styles object.

How Do We Reproduce?

Here is a repo to reproduce it.
Simply execute yarn build to see the error.
If you replace the version in the packages.json from mini-css-extract-plugin": "2.4.1 to mini-css-extract-plugin": "2.3.0, it works.

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

System:
OS: Windows 10 10.0.19043
CPU: (8) x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
Memory: 14.37 GB / 31.88 GB
Binaries:
Node: 14.17.6 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
npm: 7.18.1 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 94.0.4606.71
Edge: Spartan (44.19041.1023.0), Chromium (94.0.992.38)
Internet Explorer: 11.0.19041.1202
Monorepos:
Yarn Workspaces: 1.22.10
Lerna: 4.0.0
Packages:
case-sensitive-paths-webpack-plugin: 2.4.0 => 2.4.0
compression-webpack-plugin: 9.0.0 => 9.0.0
css-minimizer-webpack-plugin: 3.1.1 => 3.1.1
duplicate-package-checker-webpack-plugin: 3.0.0 => 3.0.0
eslint-webpack-plugin: 3.0.1 => 3.0.1
filemanager-webpack-plugin: 6.1.7 => 6.1.7
html-webpack-plugin: 5.3.2 => 5.3.2
node-polyfill-webpack-plugin: 1.1.4 => 1.1.4
terser-webpack-plugin: 5.2.4 => 5.2.4
webpack: 5.57.1 => 5.57.1
webpack-bundle-analyzer: 4.4.2 => 4.4.2
webpack-dev-server: 4.3.1 => 4.3.1
webpack-manifest-plugin: 4.0.2 => 4.0.2
workbox-webpack-plugin: 6.3.0 => 6.3.0

[alexander-akait]

Please use github repo to provide example and steps

[alexander-akait]

And do not ignore How Do We Reproduce?, otherwise it will be closed without help

[DavidHenri008]

I will try to add an exemple.
Thanks

[alexander-akait]

Yes, regression, workaround - change exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/], on exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/, /\.webpack/],

[alexander-akait]

Let's close in favor #847, sounds like another problem, but the essence of the problem is the same

[DavidHenri008]

@alexander-akait Unfortunately this issue still exists in version v2.4.2. You can still reproduce the issue in the repo above.

[alexander-akait]

Here fix webpack/webpack#14435, you need to wait webpack release

[DavidHenri008]

I confirm that the mini-css-extract-plugin v2.4.2 and webpack 5.58.1 works now properly together.
Thank you very much!