HMR Infinite request loop after restarting webpack serve

[stefan-toubia]

Bug report

What is the current behavior?
I've been working on a webpack 5 migration and have run into a bug where HMR gets stuck in an infinite loop after restarting the dev server. Sorry I'm not sure if this is an issue specific to webpack dev server or not, it seems to be originating from this repo.

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

1. Start webpack dev server webpack serve
2. Modify a source file.
   Now you observe the first hot-update.json request like http://localhost/static/customer-dashboard.263d2b2c0d78de6116e2.hot-update.js
3. Stop WDS.
   Console:

[WDS] Disconnected!
GET http://localhost:9111/sockjs-node/info?t=1627083911242 net::ERR_CONNECTION_REFUSED

4. Start WDS.
   Crash loop starts: GET http://localhost/static/customer-dashboard.c3beb7f29395129d613f.hot-update.json 404 (Not Found)

I have to manually refresh the page to resolve it, but the browser is freezing up at this point from the thousands of requests.

Call stack

(anonymous) (jsonp chunk loading:538)
Promise.then (async)
__webpack_require__.hmrM (jsonp chunk loading:537)
Promise.then (async)
hotCheck (hot module replacement:234)
check (dev-server.js:15)
(anonymous) (dev-server.js:29)
Promise.then (async)
check (dev-server.js:16)
(anonymous) (dev-server.js:29)
Promise.then (async)
check (dev-server.js:16)
(anonymous) (dev-server.js:29)
Promise.then (async)
check (dev-server.js:16)
(anonymous) (dev-server.js:29)
Promise.then (async)
check (dev-server.js:16)
(anonymous) (dev-server.js:29)
Promise.then (async)
check (dev-server.js:16)
(anonymous) (dev-server.js:29)
Promise.then (async)
check (dev-server.js:16)
(anonymous) (dev-server.js:29)
Promise.then (async)
check (dev-server.js:16)
(anonymous) (dev-server.js:29)
Promise.then (async)
check (dev-server.js:16)
(anonymous) (dev-server.js:29)
Promise.then (async)
check (dev-server.js:16)
(anonymous) (dev-server.js:29)
Promise.then (async)
check (dev-server.js:16)
(anonymous) (dev-server.js:29)
Promise.then (async)
check (dev-server.js:16)
(anonymous) (dev-server.js:29)
Promise.then (async)
check (dev-server.js:16)
(anonymous) (dev-server.js:29)
Promise.then (async)
check (dev-server.js:16)
(anonymous) (dev-server.js:29)
Promise.then (async)
check (dev-server.js:16)
(anonymous) (dev-server.js:29)
Promise.then (async)
check (dev-server.js:16)
(anonymous) (dev-server.js:29)
Promise.then (async)
check (dev-server.js:16)
(anonymous) (dev-server.js:29)
Promise.then (async)
check (dev-server.js:16)
(anonymous) (dev-server.js:29)
Promise.then (async)
check (dev-server.js:16)
(anonymous) (dev-server.js:29)
Promise.then (async)
check (dev-server.js:16)
(anonymous) (dev-server.js:29)
Promise.then (async)
check (dev-server.js:16)
(anonymous) (dev-server.js:29)
Promise.then (async)
check (dev-server.js:16)
(anonymous) (dev-server.js:29)
Promise.then (async)
check (dev-server.js:16)
(anonymous) (dev-server.js:29)
Promise.then (async)
check (dev-server.js:16)
(anonymous) (dev-server.js:29)
Promise.then (async)
check (dev-server.js:16)
(anonymous) (dev-server.js:29)
Promise.then (async)
check (dev-server.js:16)
(anonymous) (dev-server.js:29)
Promise.then (async)
check (dev-server.js:16)
(anonymous) (dev-server.js:29)
Promise.then (async)
check (dev-server.js:16)
(anonymous) (dev-server.js:29)
Promise.then (async)
check (dev-server.js:16)
(anonymous) (dev-server.js:29)
Promise.then (async)
check (dev-server.js:16)
(anonymous) (dev-server.js:29)
Promise.then (async)
check (dev-server.js:16)
(anonymous) (dev-server.js:29)

The jsonp chunk loading error:
TypeError: Cannot read property 'requestContent' of undefined

We write the output to disk using devServer.writeToDisk and serve it from a separate server but I've also tested it without writing to disk and making requests direct to WDS, same results. That means I also have output.clean = true, but I get the same results when disabling this.

I'm using persisted cache but get the same results when disabling the cache.

EDIT: Confirmed not broken in 5.45.1. I'm guessing it was introduced in #13576, what do you think @rockwalrus ? What I was seeing was that updateModules was [] and maybe should have been undefined since the window was never reloading.

webpack/hot/dev-server.js

Lines 15 to 16 in a32b0fd

	.then(function (updatedModules) {
	if (!updatedModules) {

What is the expected behavior?

Other relevant information:
webpack version: 5.46.0
Node.js version: tested on node 10 and 14
Operating System: macos 10.14.6
Additional tools:
Chrome
webpack-dev-server 3.11.2

[alexander-akait]

Can you provide repo?

[stefan-toubia]

@alexander-akait here you go https://github.com/stefan-toubia/webpack-5-hmr-bug

I was able to repro the issue on this repo.

[alexander-akait]

Fixed #13877