Module.css loaded successfully but undefined

Question

I imported data from module.css, however it is undefined.

import styles from "../css/basic-styles.module.css";
console.log(styles) // undefined.

My basic-styels.module.css has data

*{
  outline: none;
}
.pageMoveIconInActive{
  color: #BBBBBB;
  cursor: default;
}

Webpack.config.js has rule

 module: {
   rules: [
       {
           test: /\.js$/,
           exclude: /node_modules/,
           use: {
               loader: "babel-loader",
           },
       },
       {
        test: /\.css/,
        use: [
            "style-loader",
            {
                loader: 'css-loader'
            }
        ]
    },

and npm run dev looks like showing the correct log.

javascript modules 6.62 KiB
  ./src/components/FormPage.js 4.91 KiB [code generated]
  ./src/css/basic-styles.module.css 1.15 KiB [code generated]
  ./node_modules/css-loader/dist/cjs.js!./src/css/basic-styles.module.css 576 bytes [built] [code generated]
webpack 5.90.3 compiled successfully in 373 ms
assets by status 1.86 MiB [cached] 1 asset
cached modules 1.61 MiB (javascript) 2.4 KiB (runtime) [cached] 119 modules
./node_modules/css-loader/dist/cjs.js!./src/css/basic-styles.module.css 576 bytes [built]
webpack 5.90.3 compiled successfully in 54 ms

so, where should I check?

Answer 1

Enable the CSS modules using { modules: true } config for css-loader.

From the style-loader doc:

All local variables (class names) are exported as named exports. To achieve this behaviour you also have to setup modules option for css-loader

See below example:

index.js:

import * as styles from './styles.module.css';
console.log('🚀 ~ styles:', styles);

styles.module.css:

* {
    outline: none;
}

.pageMoveIconInActive {
    color: #bbbbbb;
    cursor: default;
}

webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                        },
                    },
                ],
            },
        ],
    },
    plugins: [new HtmlWebpackPlugin({})],
};

Build log:

$ npm run build

> build
> webpack

asset main.js 24 KiB [compared for emit] (name: main)
asset index.html 231 bytes [emitted]
runtime modules 972 bytes 5 modules
cacheable modules 9.96 KiB
  modules by path ./node_modules/ 8.15 KiB
    modules by path ./node_modules/style-loader/dist/runtime/*.js 5.84 KiB
      ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 2.42 KiB [built] [code generated]
      ./node_modules/style-loader/dist/runtime/styleDomAPI.js 1.5 KiB [built] [code generated]
      ./node_modules/style-loader/dist/runtime/insertBySelector.js 1000 bytes [built] [code generated]
      + 3 modules
    modules by path ./node_modules/css-loader/dist/runtime/*.js 2.31 KiB
      ./node_modules/css-loader/dist/runtime/noSourceMaps.js 64 bytes [built] [code generated]
      ./node_modules/css-loader/dist/runtime/api.js 2.25 KiB [built] [code generated]
  modules by path ./src/ 1.81 KiB
    ./src/index.js 86 bytes [built] [code generated]
    ./src/styles.module.css 1.17 KiB [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./src/styles.module.css 568 bytes [built] [code generated]
webpack 5.88.2 compiled successfully in 268 ms

Open the dist/index.html file in browser, see the log in the console:

UPDATE:

If you want to disable the ES modules named export for locals. You can set modules.namedexport option to false:

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

index.js:

import styles from './styles.module.css';
console.log('🚀 ~ styles:', styles);

After building, execute dist/main.js:

$ node dist/main.js 
🚀 ~ styles: { pageMoveIconInActive: 'mZZ_AcjbK0s0ykwbz0h_' }

package.json:

{
  "version": "1.0.0",
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "css-loader": "^7.1.1",
    "html-webpack-plugin": "^5.6.0",
    "style-loader": "^4.0.0",
    "webpack": "^5.80.0",
    "webpack-cli": "^5.0.2"
  }
}