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.

Don't work with css-modules

See original GitHub issue

Operating System: macOS Mojave 10.14.6
Node Version: 12.13.1
NPM Version: 6.14.2
webpack Version: 4.42.0
mini-css-extract-plugin Version: 0.9.0

Expected Behavior

Should work with css-module

Actual Behavior

If any css file includes a css-module export, then the HMR breaks. a.css

:local(.aaa) {
  background-color: pink; // hmr warns: do not know how to reload themselves, and style won't update
}
.aa {
  background-color: khaki; // hmr warns: do not know how to reload themselves, and style won't update
}

b.css

.bbb {
  background-color: skyblue; // this works, no warning, style updated.
}

Those style without css-module will work. scss file is the same behaviour with css.

Code

// webpack.config.js
// If your code blocks are over 20 lines, please paste a link to a gist
// (https://gist.github.com).

// additional code, HEY YO remove this block if you don't need it
        {
          test: /\.s?css$/,
          exclude: /node_modules/,
          use: [
            {
              loader: MiniCssExtractPlugin.loader,
              options: {
                hmr: !isProd,
              },
            },
            {
              loader: "css-loader",
              options: {
                importLoaders: 2,
                modules: {
                  mode: "global",
                  localIdentName: isProd
                    ? "_[hash:base64]"
                    : "[path][name]__[local]",
                },
              },
            },
            {
              loader: "postcss-loader",
              options: {
                plugins: [
                  require("autoprefixer")(),
                  require("postcss-flexbugs-fixes")(),
                ],
              },
            },
            { loader: "sass-loader" },
          ],
        },

How Do We Reproduce?

just add css-modules into the advanced example shown in readme.md. Then those css/scss file with a :local() in it will fail to hot reload. Those css/scss file without any :local() works fine.