HMR does not work when page require output bundles from multiple entries
See original GitHub issueBug 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
- 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">
- change second.js
- hmr work
- change first.js
- page request first.hot-update.js,but report an error
Uncaught TypeError: Cannot set properties of undefined (setting './src/first.js')
and a warningUpdate 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:
- Created 2 years ago
- Comments:7 (4 by maintainers)
Top GitHub Comments
You different unique names for compilers, just add
name
andoutput.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 compilersFind https://github.com/webpack/webpack/issues/13316, study later, thanks.