HMR with chunk splitting fails to reload the modified chunk if it’s not the last

[andersk]

• Operating System: Linux
• Node Version: 14.16.0
• NPM Version: 6.14.11
• webpack Version: 5.27.2
• mini-css-extract-plugin Version: 1.3.9

Expected Behavior

Hot module reload should work with all CSS chunks.

Actual Behavior

When there are multiple CSS chunks due to optimization.splitChunks, hot module reload only works with the last CSS chunk.

Code

https://gist.github.com/andersk/2d45d4363478b22e998e177836ebce12

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

module.exports = {
  mode: "development",
  entry: {
    foo: ["./common.css", "./foo.css"],
    bar: ["./common.css", "./bar.css"],
  },
  module: {
    rules: [
      { test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"] },
    ],
  },
  optimization: {
    splitChunks: { chunks: "all", minSize: 1 },
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "foo.html",
      template: "foo.html",
      chunks: ["foo"],
    }),
    new HtmlWebpackPlugin({
      filename: "bar.html",
      template: "bar.html",
      chunks: ["bar"],
    }),
    new MiniCssExtractPlugin(),
  ],
};

How Do We Reproduce?

1. git clone https://gist.github.com/andersk/2d45d4363478b22e998e177836ebce12 css-hmr-test
   cd css-hmr-test
   npm install
   npx webpack serve --hot

2. Open http://localhost:8080/foo.html.
3. Edit foo.css, e.g. by changing green to blue, and see that the change is applied in the browser immediately.
4. Edit common.css, e.g. by changing green to blue, and see that the change is not applied.

In the browser console, you can see that the wrong chunk has been reloaded:

[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] Updated modules:
[HMR]  - ./common.css
[HMR] App is up to date.
[HMR] css reload http://localhost:8080/foo.css

This may be the same as one of the issues reported in #444. If so, consider this to be a minimal reproducible test case as requested there.

[alexander-akait]

Works fine, can't reproduce, update webpack to the latest version

[alexander-akait]

Feel free to feedback

[alexander-akait]

[andersk]

Interesting. I didn’t think to try multiple browsers before, but I tried it in Chrome and both chunks can be updated as expected. In Firefox, only the last chunk can be updated.

Same result after updating css-loader 5.1.3 → 5.2.0, mini-css-extract-plugin 1.3.9 → 1.4.0, webpack 5.27.2 → 5.28.0. (Just pushed these updates to the Gist.)

I reproduced in a freshly created Firefox profile to rule out problems with Firefox configuration or extensions, and in both Firefox 87 and yesterday’s nightly to rule out problems with a specific Firefox version.

Can you try reproducing in Firefox?

[alexander-akait]

Yes you are right, it is duplicate #444, we can't find your link in DOM, modueId is bad for search, so we can't update it adding ?1231231231 (time), chrome works because you have Disable cache by default (each request is not cached, but firefox by default don't disable cache for dev tool). I have prioritized this issue, I think we will solve it in the next week. Let's close in favor #444, I will add reproducible example to the issue from your report, thanks for the issue