Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error when importing module.css

See original GitHub issue

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® Core™ 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