question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

HMR does not work when page require output bundles from multiple entries

See original GitHub issue

Bug report

What is the current behavior?

HMR does not work when page require output bundles from multiple entries in webpack 5. But it works in webpack 4.

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

https://github.com/toBeTheLight/issue-20211215

  1. Require multiple bundles in page from two entries(single complier or multiple compliers):
// from { first: ['xxxx']} in entry config
<script src="./first.js">
// from { second: ['xxxx']} in entry config
<script src="./second.js">
  1. change second.js
  2. hmr work
  3. change first.js
  4. page request first.hot-update.js,but report an error Uncaught TypeError: Cannot set properties of undefined (setting './src/first.js') and a warning Update failed: ChunkLoadError: Loading hot update chunk first failed

What is the expected behavior? Hmr of all files work.

Other relevant information: webpack version: v5.0.0~latest

I guess, in webpack5, hrm context of first.js has be overwritten by second.js(which is loaded later).

For example,in webpack5

var currentUpdatedModulesList;
var waitingUpdateResolves = {};
function loadUpdateChunk(chunkId) {
	return new Promise((resolve, reject) => {
		waitingUpdateResolves[chunkId] = resolve;
		var url = __webpack_require__.p + __webpack_require__.hu(chunkId);
		var error = new Error();
		var loadingEnded = (event) => {
      // ......
		};
		__webpack_require__.l(url, loadingEnded);
	});
}

self["webpackHotUpdatewebpack5"] = (chunkId, moreModules, runtime) => {
  // ......
	if(waitingUpdateResolves[chunkId]) {
		waitingUpdateResolves[chunkId]();
		waitingUpdateResolves[chunkId] = undefined;
	}
};

After first.js emit hmr, function loadUpdateChunk run. And then, when self["webpackHotUpdatewebpack5"] is running, waitingUpdateResolves in self["webpackHotUpdatewebpack5"] is the one be declared by second.js, and it is empty, so update of first.js failed.

When in single complier, using optimization.runtimeChunk can resolve this problem. But it is not available for multiple compliers.

And maybe relate to https://github.com/webpack/webpack/commit/887852f6df9774d52b017c0bd8781466966a64e7 of webpack 4?

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
alexander-akaitcommented, Dec 15, 2021

You different unique names for compilers, just add name and output.uniqueName for each compiler https://github.com/toBeTheLight/issue-20211215/blob/master/webpack5/webpack.compliers.config.js#L3, it will generated different runtimes for different compilers

1reaction
toBeTheLightcommented, Dec 16, 2021
Read more comments on GitHub >

github_iconTop Results From Across the Web

Webpack-dev-server HMR not working with multiple entry points
It seems like HMR has stopped working in my browser. Webpack is running and bundling it correctly! Any ideas? Thanks so far and...
Read more >
Hot Module Replacement - webpack
Hot Module Replacement (or HMR) is one of the most useful features offered by webpack. It allows all kinds of modules to be...
Read more >
Hot Module Replacement - SurviveJS
You should not enable HMR for your production configuration. It likely works, but it makes your bundles bigger than they should be. If...
Read more >
Webpack — Hot Module Replacement - Medium
Hot module replacement (HMR) takes care of issues like these. ... an extra piece of code that webpack adds to the generated output...
Read more >
A Deep Dive into Hot Module Replacement with Webpack ...
By default, it is not. ... main.js is the single output bundle, produced by webpack; ... The goal of HMR is to avoid...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found