HMR not working on webpack 5.66.0

Bug report

What is the current behavior?
Hot module reloading is not working after updating webpack to v5.66.0.

If the current behavior is a bug, please provide the steps to reproduce.

Clone https://github.com/saltire/react-node-boilerplate.
Run npm i webpack@latest to update to 5.66.0.
Run npm run watch.
Modify src/App.jsx. The browser console reports bundle rebuilding twice, the request to main.xxxxx.hot-update.json fails with status 404, and the app does not update.

Notice the issue does not occur if webpack 5.65.0 is installed.

What is the expected behavior?
When making a change to a jsx file, the app should reload automatically.

Other relevant information:
webpack version: 5.66.0
Node.js version: 16
Operating System: MacOS
Additional tools

This repo uses webpack-dev-middleware, webpack-hot-middleware, react-refresh, and @pmmmwh/react-refresh-webpack-plugin, among other packages. The issue may stem from a conflict with one of these, but I don't have enough internal knowledge of webpack or these packages to say which. It could also be a misconfiguration on my part. I'm filing the issue with webpack because I was able to isolate the problem to an update of this package.

Let me know if you need any more info!

Can you try to increase watchOptions.aggregateTimeout due https://github.com/webpack/webpack/releases/tag/v5.66.0

add aggregateTimeout:200，and then change aggregateTimeout to 600，all failed.

hooks.done callback doesn't run sometimes。

@saltire

@saltire Wierd, I can't reproduce, maybe you have network problem? Try to reinstall deps

I confirm the same issue. I have upgraded to Webpack 5.66, and my perfectly working configuration on Webpack 5.55, now triggers a full page reload on every change, even of simple CSS files.

webpack: 5.66.0
Node.js: 17
MacOS: 12.1

main.*.hot-update.json fails with status 404, and the page does a full reload.

We are seeing the same issue, a single change triggers a double compilation, and that causes the first compilation assets to be deleted (including the *.hot-update.js(on) files) - increasing the aggregateTimeout appears to help a little, but it's still a bit flaky.

I'll try to reduce to a minimal config - though may take me a few days to get to it.

node: v16.13.0
webpack: 5.66.0
macos: 11.6.2

Very strange, because we don't change many things around watching, only reduce aggregateTimeout for faster builds

this issue still exists in v5.67.0

We need more information to understand here is bug, I can't reproduce...

I created a project to reproduce the issue:

Download reproduction.zip
npm run init
npm run dev

Change any .tsx or .css file and see the 404 error in the network panel (enable "Preserve log" in Chrome) and the webpack doing a full page reload.

Weird... I can't reproduce too, maybe somebody can record video/screenshots

@daniele-orlando

@daniele-orlando do yo have M1 ?

@daniele-orlando

I was able to run @daniele-orlando's example, and it's flaky - most of the times the hot-update is a 404, though sometimes it works fine. Here's the recording @alexander-akait

I'll try to also create a smaller repro...

Screen.Recording.2022-01-24.at.3.53.48.PM.mov

Not an M1 machine:

hm, I think it is due double bundling (you can see two successfully output), something was changed and webpack bundle it again, and hash may was changed

I think my case is related to #14946

Apologies, I commented on the aggregateTimeout PR as I didn't know this issue was already open. Below is a copy of my comment, original here: #15041 (comment)

The docs still state this value is 200: https://webpack.js.org/configuration/watch/#watchoptionsaggregatetimeout

FWIW, this causes double-rebuilds when using Visual Studio Code (all extensions disabled). For brevity I've created a repro https://github.com/levymetal/webpack5-double-compile-repro but this occurs on all my projects upgraded to webpack>=5.66.0 on multiple machines.

This might be because VSCode has previously been known to touch files twice when saving: microsoft/vscode#9419. This wasn't fixed at the time and I don't know if it's still the case as I haven't yet attempted to log filesystem events, but it seems likely.

I'm not sure if it's Webpack's job to work around the limitations of VSCode, but as it currently stands this is a tricky issue to debug that will affect a significant number of people. IMHO this seems big enough to warrant calling out in the docs, that some editors require an aggregateTimeout of at least 100ms to avoid compiling twice on every save.

I wonder if this may even be the historical reason for 200ms.

I've found that the timeout should be as high as 600ms to ensure HMR does not get bailout and fallback to live reloading the page. I believe it would be best if it worked with a more predictable behavior.

@vankop

@vankop Double recompiling repro #15431

Issue persists for me in v5.69.1, but it seems like the root issue is in #15431. Will watch that one.

no work in v 5.72.1

HMR still does not work.

Error in browser console when I make a modification in a component :

Ignored an update to unaccepted module ./src/pages/index.tsx [HMR] The following modules couldn't be hot updated: (They would need a full reload!) [HMR] - ./src/pages/home/index.tsx

Following some issues, I added this to the webpack config, but always the same error :

devServer: { hot: 'only', liveReload: false, }, optimization: { runtimeChunk: 'single', },

When devServer objet is disable, full page reloads instead of HMR.

Webpack : 5.73.0
Node : 14.17.0
React 16.13.1
Windows 10

Why you use devServer: { hot: 'only', liveReload: false, }?

@alexander-akait

Why you use devServer: { hot: 'only', liveReload: false, }?

@alexander-akait It was just a test to try to solve my problem.

I've added hot: false and now it works well.

package.json

"start": "webpack-dev-server --mode development"

webpack.config.js

devServer: {
    open: true,
    port: 3008,
    hot: false
  },

Macbook Pro M1 chip experience an infinite loop of reload.
Webpack: 5.83.1
Node: 16.15.1
React: 16.13.1

Console consist:

GET http://localhost:5000/main.e5a0dab6fb5e23de1f5e.hot-update.json net::ERR_ABORTED 404 (Not Found)
 [HMR] Cannot find update. Need to do a full reload!
 [HMR] (Probably because of restarting the webpack-dev-server)

webpack.config.js:

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const ESLintPlugin = require('eslint-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const devMode = process.env.NODE_ENV !== "production";
const Dotenv = require('dotenv-webpack');
const ReactRefreshWebpackPlugin = devMode && require('@pmmmwh/react-refresh-webpack-plugin');
const WorkboxPlugin = require('workbox-webpack-plugin');

module.exports = {
	resolve: {
		extensions: ['.*', '.js', '.jsx', '.json'],
		modules: ['node_modules', 'public'],
	},
	devServer: {
		static: path.join(__dirname, 'dist'),
		compress: true,
		hot: true,
		port: 5000,
		historyApiFallback: {
			index: '/',
		}
	},
	devtool: "eval-source-map", // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
	entry: './public/index.js',
	mode: process.env.NODE_ENV,
	target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
	output: {
		path: path.resolve(__dirname, 'dist'), // Note: Physical files are only output by the production build task `npm run build`.
		filename: '[name].bundle.js',
		publicPath: '/'
	},
	plugins: [
		new webpack.ProvidePlugin({
			process: 'process/browser',
		}),
		devMode && new ReactRefreshWebpackPlugin(),
		new HtmlWebpackPlugin({     // Create HTML file that includes references to bundled CSS and JS.
			template: 'public/index.ejs',
			favicon: 'public/styles/images/favicon.png',
			minify: {
				ignoreCustomComments: ['jss-insertion-point'], // Used for inserting the material-ui css scripts in the top of <head />
			},
		}),
		!devMode && new CopyPlugin([
			'./public/manifest.json',
			// './public/serviceWorker/site.js',
			{ from: './public/styles/videos', to: 'videos' },
			{ from: './public/styles/images/meeba-512.png', to: 'images' },
			{ from: './public/styles/images/meeba-192.png', to: 'images' }
		]),
		new Dotenv({
			path: devMode ? '.env.development' : '.env.production', // for Development
			systemvars: true // for Production - upload process.env that already exists
		}),
		new ESLintPlugin(),
		!devMode && new MiniCssExtractPlugin(),
		!devMode && new WorkboxPlugin.GenerateSW({
			// these options encourage the ServiceWorkers to get in there fast
			// and not allow any straggling "old" SWs to hang around
			clientsClaim: true,
			skipWaiting: true,
			maximumFileSizeToCacheInBytes: 2000000000
		}),
	].filter(Boolean),
	module: {
		rules: [
			{
				test: /\.[jt]sx?$/,
				exclude: /node_modules/,
				use: [
					{
						loader: require.resolve('babel-loader'),
						options: {
							plugins: [devMode && require.resolve('react-refresh/babel')].filter(Boolean),
						},
					},
				],
			},
			{
				test: /\.(woff|woff2|eot|ttf|otf)$/i,
				type: 'asset/resource',
			},
			{
				test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
				type: 'asset/inline',
			},
			{
				test: /\.(jpe?g|png|gif|ico|mp4)$/i,
				type: 'asset/resource',
			},
			{
				test: /(\.css|\.scss|\.sass)$/,
				exclude: /node_modules/,
				use: [
					devMode ? "style-loader" : MiniCssExtractPlugin.loader,
					{
						loader: 'css-loader',
						options: {
							modules: {
								localIdentName: "[path]___[name]__[local]___[hash:base64:5]",
							},
							importLoaders: 1,
						}
					},
					'sass-loader'
				]
			}
		]
	},
	optimization: {
		minimizer: [
			new CssMinimizerPlugin(),
		],
	},
	performance: {
		maxAssetSize: 10000000,
		maxEntrypointSize: 10000000,
	}
};

I am facing simialr issue but suprisingly if i add

if (module.hot) {
    module.hot.accept();
}

in my entry point HMR starts working

@jashan777

I am facing simialr issue but suprisingly if i add
if (module.hot) {
    module.hot.accept();
}
in my entry point HMR starts working

@jashan777, can you please share your whole webpack.config.js file and the entry point? Thanks

I've added hot: false and now it works well.

package.json
"start": "webpack-dev-server --mode development"
webpack.config.js
devServer: {
    open: true,
    port: 3008,
    hot: false
  },

it work for me which i only set the hot: false, but it's not clear why.

Navigation Menu

Repository navigation

HMR not working on webpack 5.66.0 #15206

Bug report

14 remaining items

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

HMR not working on webpack 5.66.0 #15206

Description

Bug report

Activity

alexander-akait commented on Jan 19, 2022

imshenshen commented on Jan 20, 2022

alexander-akait commented on Jan 20, 2022

daniele-orlando commented on Jan 20, 2022

rigor789 commented on Jan 20, 2022

alexander-akait commented on Jan 20, 2022

kagawagao commented on Jan 23, 2022

alexander-akait commented on Jan 24, 2022

daniele-orlando commented on Jan 24, 2022

alexander-akait commented on Jan 24, 2022

vankop commented on Jan 24, 2022

rigor789 commented on Jan 24, 2022

alexander-akait commented on Jan 24, 2022

14 remaining items

vire commented on Feb 11, 2022

levymetal commented on Feb 15, 2022

tomsotte commented on Feb 15, 2022

alexander-akait commented on Feb 22, 2022

saltire commented on Feb 28, 2022

ckken commented on May 31, 2022

CarolineSenes commented on Jun 15, 2022

alexander-akait commented on Jun 15, 2022

CarolineSenes commented on Jun 21, 2022

ArtemFedorchuk commented on Aug 16, 2023

chenop commented on Aug 16, 2023

jashan777 commented on Feb 28, 2024

fiskolini commented on Feb 29, 2024

jjj201200 commented on Jul 9, 2024

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions