Modifying localIdentName in css-loader doesn't work in webpack 5 react 17

Question

Currently I am using webpack 5, react 17 and @dr.pogodin/babel-plugin-react-css-modules and all other latest packages.

I am excluding the sass/css files in assets/stylesheets which is being treated as global and using those classes inside className

Styles won't be applied changing localIdentName to something else. Tried getLocalIdent but no use.

Github Repo Link

So how to change the localIdentName ?

package.json

{
  "name": "react-app",
  "version": "1.0.0",
  "description": "React Template App",
  "author": "",
  "license": "ISC",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "dependencies": {
    "date-fns": "^2.16.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "@dr.pogodin/babel-plugin-react-css-modules": "^6.0.10",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^5.0.0-beta.1",
    "mini-css-extract-plugin": "^1.3.3",
    "node-sass": "^5.0.0",
    "postcss": "^8.2.1",
    "postcss-scss": "^3.0.4",
    "sass": "^1.30.0",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.11.0",
    "webpack-cli": "^4.3.0",
    "webpack-dev-server": "^3.11.0"
  }
}

webpack.config.js

const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const isDev = process.env.NODE_ENV === "development";

console.log(Environment: ${isDev ? "development" : "production"});

module.exports = {
  entry: "./index.js",
  mode: isDev ? "development" : "production",
  output: {
    path: path.join(__dirname, "dist"),
    publicPath: "/",
    filename: "bundle.js",
  },
  devServer: {
    compress: true,
    open: true,
    hot: true,
    historyApiFallback: true,
    quiet: false,
    stats: "errors-warnings",
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
      {
        test: /\.(css|sass|scss|less)$/,
        use: [
          isDev ? "style-loader" : MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              modules: {
                auto: (resourcePath) =>
                  resourcePath.indexOf("assets/stylesheets") === -1,
                  localIdentName: "[path]___[name]__[local]___[hash:base64:5]",
                  // getLocalIdent: (context, localIdentName, localName, options) => {
                  //   return "whatever_random_class_name";
                  // },
              },
              sourceMap: isDev,
            },
          },
          "sass-loader"
        ],
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "./index.html",
      favicon: "./public/favicon.ico",
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css",
    })
  ],
  devtool: isDev ? "source-map" : false,
};

.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    [
      "@dr.pogodin/babel-plugin-react-css-modules",
      {
        "webpackHotModuleReloading": true,
        "autoResolveMultipleImports": true,
        "filetypes": {
          ".scss": {
            "syntax": "postcss-scss"
          }
        }
      }
    ]
  ]
}

Answer 1

Sounds like I forgot to tell you babel-plugin-react-css-modules has an option to configure the scoped name too which is called generateScopedName.

As long as you configured this as same as css-loader, it should work then:

• .babelrc

[
  "@dr.pogodin/babel-plugin-react-css-modules",
  {
    "generateScopedName": "[name]__[local]___[hash:base64:5]", // switch to whatever you want to
    // ...
  }
]

• webpack.config.js:

{
  loader: "css-loader",
  options: {
    modules: {
      // ...
      localIdentName: "[name]__[local]___[hash:base64:5]",
    },
  },
},

NOTE: In case of generating based on env, you should use js babel config file babel.config.js so you can conditionally generate the name via NODE_ENV