Webpack 5 HMR not working for CSS updates

[D10f]

• Operating System: Linux 5.4.0-66-generic Add support for a HTML 5 History API fallback #74~18.04.2-Ubuntu

• Node Version: v12.21.0

• NPM Version: 7.5.6

• webpack Version: 5.24.3

• webpack-dev-server Version: 3.11.2 and 4.0.0-beta.0

• Browser: FF 86.0, Brave Version 1.21.73, Chromium Version 87.0.4280.141

• This is a bug

• This is a modification request

https://github.com/herokunt/hmr-repo-test

Expected Behavior

Updates are applied automatically without page refresh

Actual Behavior

Updates are applied after page refresh

For Bugs; How can we reproduce the behavior?

1. Start the server

npm i && npm start

2. Make whatever changes to SCSS files. Nothing changes until refresh.

body {
  /* color: #333; */
  color: red 
}

3. Check browser console and network requests on each update.
   
   

4. Make whatever changes to JS files. It works.

const title = document.querySelector('.project__title');
title.style.color = 'green';

[alexander-akait]

Do not use [contenthash] for dev purpose, we are working on HMR, I think we will improve this on the next week and fix it, right now it is limitation, here issue webpack-contrib/mini-css-extract-plugin#391

[alexander-akait]

Just note using hashes in dev purpose increase your build time, try to avoid using it in dev env

[nyngwang]

@alexander-akait: But I didn't use [contenthash] and still got the same result: no update on-save? Could you help pointing me to the related thread or something?

[alexander-akait]

I need to look at your configuration, otherwise it is hard to say there is a problem

[nyngwang]

@alexander-akait: Lol I just realized that what I already have is (probably) called hot-reload lol. You might see I tag you in another thread comment.

[stevenKirill]

How did you solve this problem?

@alexander-akait: Lol I just realized that what I already have is (probably) called hot-reload lol. You might see I tag you in another thread comment.

[alexander-akait]

Without reproducible example I can't say sorry

[stevenKirill]

This is my config, and unfortunately my HMR doesn't work with css, I use css modules

`const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const StatoscopeWebpackPlugin = require('@statoscope/webpack-plugin').default;
const alias = require('./alias');

const config = {
entry: path.resolve(__dirname, './src/index.tsx'),
output: {
path: path.resolve(dirname, './build'),
filename: '[name].js?version=[chunkhash:8]',
clean: true,
publicPath: '/',
},
module: {
rules: [
{
test: /.(t|j)sx?$/,
exclude: /node_modules/,
use: "babel-loader",
},
{
test: /.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: {
localIdentName: "[path][name][local]--[hash:base64:5]",
}
},
},
],
include: /.module.css$/,
},
{
test: /.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"],
exclude: /.module.css$/,
},
{
test: /.(jpe?g|svg|png|gif|ico|eot|ttf|woff|woff2?)(?v=\d+.\d+.\d+)?$/i,
type: 'asset/resource',
},
]
},
resolve: {
extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],
alias,
fallback: {
buffer: false,
},
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css?version=[chunkhash:8]',
ignoreOrder: true
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './public/index.html'),
filename: path.resolve(__dirname, './build/index.html'),
}),
],
devServer: {
port: "9500",
static: ["./build"],
open: true,
hot: true,
historyApiFallback: true,
client: {
overlay: {
errors: false,
warnings: false,
},
},
proxy: {
'/api/v1': 'http://localhost:8080'
},
},
optimization: {
runtimeChunk: true,
splitChunks: {
chunks: 'all',
minSize: 90 * 1024,
maxSize: 244 * 1024,
minChunks: 2,
maxAsyncRequests: 30,
maxInitialRequests: 30,
automaticNameDelimiter: '~',
cacheGroups: {
default: {
name: 'default',
minChunks: 1,
priority: -20,
reuseExistingChunk: true
},
defaultVendors: {
name: 'vendors',
test: /node_modules/,
priority: -10
},
async: {
name: 'async',
enforce: true,
priority: 0,
chunks: 'async'
}
}
}
}
}

module.exports = (env, options) => {
const isProd = options.mode === 'production';
const envKeys = Object.keys(env).reduce((prev, next) => {
prev[process.env.${next}] = JSON.stringify(env[next]);
return prev;
}, {});

if (env.analyze) {
config.plugins.push(new StatoscopeWebpackPlugin({
saveReportTo: path.resolve(__dirname, './reports/report-[name]-[hash].html'),
saveStatsTo: path.resolve(__dirname, './stats/stats-[name]-[hash].json'),
name: 'gpb-expert-front'
}))
}
config.plugins.push(new webpack.DefinePlugin(envKeys));

config.devtool = isProd ? !isProd : 'inline-source-map';
config.target = isProd ? 'browserslist' : 'web';

return config;
}
`

[alexander-akait]

@stevenKirill Can you create a github repo, because it is not readable, thank you

[stevenKirill]

@stevenKirill Can you create a github repo, because it is not readable, thank you

https://github.com/stevenKirill/webpack-example I created the example of my webpack config

[alexander-akait]

@stevenKirill Please put package.json with versions and a sample of code where it doesn't work. And can you clarify what do you doesn't work? Do you have an error? Or it is just full reload?

[stevenKirill]

@alexander-akait Here is my package.json https://github.com/stevenKirill/webpack-example/blob/main/package.json

For example I have a Component and try to change css modules code and it's fully refresh page

Here I try to change background: 'blue' and it's reload page instead of just change my css without reloading

[alexander-akait]

For example I have a Component and try to change css modules code and it's fully refresh page

Because when you change CSS your classes will be changed, so exports will be changed, do you have https://github.com/pmmmwh/react-refresh-webpack-plugin?

[stevenKirill]

For example I have a Component and try to change css modules code and it's fully refresh page

Because when you change CSS your classes will be changed, so exports will be changed, do you have https://github.com/pmmmwh/react-refresh-webpack-plugin?

No, I didn't use this plugin, I thought this problem is because of css modules system, am I right ?

[alexander-akait]

@stevenKirill Yeah, because we export clases, you can change name of class or add a new class or compose with other class (so export value will be other), it is side effects, we can't just hot reload CSS in such case