css-loader modules problem

when use css-loader modules with default options

const path = require("path");

module.exports = {
  target: "web",
  entry: "./src/client/client.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "public"),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
              modules: true,
            },
          },
        ],
      },
    ],
  }

};

you cant’ do this, styles will be undefined

Get Guapibai’s stories in your inbox
Join Medium for free to get updates from this writer.
Remember me for faster sign in
import styles from "./some.module.css";

export default () => {
  console.log(styles);
  return (
     <div className={styles?.testcss}>test css</div>
  );
};

instead you can do this

import * as styles from "./some.module.css";

to make import styles from “./some.module.css” success you need to change css-loader config to this

{
    test: /\.css$/,
    use: [
      "style-loader",
      {
        loader: "css-loader",
        options: {
          importLoaders: 1,
          modules: true,
          esModule: false, // the change
        },
      },
    ],
  },