Styles break after the first change [in wepack 5 / yarn 2](but it works correctly if refresh page manually)

I upgraded my project to Webpack 2 / Yarn 2 and used webpack serve instead of webpack-dev-server to run the dev server. I configured this fast refresh package with webpack 4 before and was OK. I have an issue with the new config, Styles break after the first change. I recorded behavior in this GIF: http://g.recordit.co/1hY0RiTnu5.gif

[pmmmwh]

@gaearon I don’t know if the issue is Webpack or fast refresh plugin. I updated all loaders and webpack plugins. I don’t know how to reproduce it without this plugin to sure webpack built-in HMR has a style issue, do you have any idea to reproduce it without the plugin? Maybe this issue is related to MiniCssExtractPlugin. This is my style-loader config:

[
  {
    test: /\.s?[ac]ss$/,
    exclude: /\.module.s?[ac]ss$/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          esModule: true,
        },
      },
      'css-loader',
      'postcss-loader',
      { loader: 'sass-loader', options: { sourceMap: !isProduction } },
    ],
  },
  {
    test: /\.less$/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          esModule: true,
        },
      },
      'css-loader',
      {
        loader: 'less-loader', // compiles Less to CSS
        options: {
          lessOptions: {
            modifyVars: lessVariable,
            javascriptEnabled: true,
          },
        },
      },
    ],
  },
  {
    test: /\.module.s?[ac]ss$/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          esModule: true,
        },
      },
      {
        loader: 'css-loader',
        options: {
          importLoaders: 1,
          modules: {
            localIdentName: sharedConfig.styleLoader.modules.localIdentName,
          },
        },
      },
      'postcss-loader',
      { loader: 'sass-loader', options: { sourceMap: !isProduction } },
    ],
  },
]

Dependencies:

{
  "react": "^17.0.1",
  "react-dom": "^17.0.1",
  "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
  "react-refresh": "0.9.0",
  "webpack": "^5.4.0",
  "webpack-cli": "^4.2.0",
  "postcss-loader": "^4.0.4",
  "node-sass": "^5.0.0",
  "mini-css-extract-plugin": "^1.3.1",
  "less-loader": "^7.1.0",
  "less": "^3.12.2",
  "css-loader": "^5.0.1",
  "babel-loader": "^8.2.1",
  "@babel/cli": "^7.12.1",
  "@babel/core": "^7.12.3",
  "@babel/node": "^7.12.6",
  "sass": "^1.29.0",
  "sass-loader": "^10.1.0"
}

Hi - I am pretty certain that your error has nothing to do with this plugin.

To achieve HMR with CSS during development - you will have to use style-loader instead of MiniCssExtractPlugin.loader. You could probably switch them according to Webpack’s mode. Alternatively, you can use extract-css-chunks-webpack-plugin which basically combines the two as one plugin.

Docs here: https://github.com/webpack-contrib/css-loader#extract

[pmmmwh]

@mizi-lin If you have any issues related to CSS, please file issues at the corresponding loaders (e.g. style-loader, css-loader, etc.)