Error when importing module.css

DavidHenri008 commented 3 years ago

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