webpack: 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!

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 11
Comments: 39 (19 by maintainers)

Most upvoted comments

@alexander-akait yeah, that’s what I think as well, we’ve been seeing double bundling on our side - though often times, the hash doesn’t change, but the files are deleted from the output directory. I’m trying to bisect when this started happening, I’ll post my results here shortly

Update: it’s starting from 5.66.0 - any prior version I tried (5.65.0, 5.64.4, 5.62.0, 5.64.0, 5.62.0) works as expected.

rigor789 on Jan 24, 2022

no work in v 5.72.1

ckken on May 31, 2022

try set webpack.config.js

  devServer: {
    ...
    hot: false,
  },

wdlnydhcg on Jan 27, 2022

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.

daniele-orlando on Jan 20, 2022

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

rigor789 on Jan 20, 2022

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,
	}
};

chenop on Aug 17, 2023

This seem to be related to output.clean: true which removes the HMR update file on the second compilation. Maybe we should keep HMR files around for a while before removing them?

The second cause of the problem seem to be the double compilation, which could have various reasons…

sokra on Feb 2, 2022

maybe webpack shouldn’t delete the previous hot-update files in case the compilation didn’t emit any new files/nothing changed?

It can be memory problem, ideally we should find a way to prevent double compilation

alexander-akait on Jan 24, 2022