Webpack 4.10.x hot module reloading breaks with dynamic imports

[mikehdt]

Bug report

What is the current behavior?

Hot module reloading does not work for dynamic imports, as of Webpack 4.10.0

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

I'm using https://github.com/smooth-code/loadable-components with React to do hot module reloading during development. Using Webpack 4.9.2 (or below), hot module reloading works with dynamic imports. Webpack 4.10.x (tested 4.10.0, 4.10.1 and 4.10.2) breaks this functionality and returns the "couldn't update the module, full reload needed" message.

It's a tricky one to isolate, as there's a lot of moving pieces including server-side rendering. However, I have been able to narrow it down to just the Webpack minor version change.

I've tried the loadable-components own provided example from their repo with an upgraded Webpack and it does seem to handle updates, but perhaps is implemented a bit differently.

What is the expected behavior?

Dynamic imports should work with HMR. Something between 4.9.x and 4.10.x seems to have changed which has resulted in this now failing.

4.9.2 shows this in the console:

[HMR] bundle rebuilding
client.js?fec9:242 [HMR] bundle rebuilt in 246ms
process-update.js?e135:41 [HMR] Checking for updates on the server...
process-update.js?e135:114 [HMR] Updated modules:
process-update.js?e135:116 [HMR]  - ./src/common/components/Overview/Overview.js
process-update.js?e135:116 [HMR]  - ./src/common/components/Overview/index.js
process-update.js?e135:116 [HMR]  - ./src/routes/routes.js
process-update.js?e135:116 [HMR]  - ./src/client-app.js
process-update.js?e135:121 [HMR] App is up to date.

4.10.2 is less happy:

[HMR] connected
client.js?fec9:234 [HMR] bundle rebuilding
client.js?fec9:242 [HMR] bundle rebuilt in 271ms
process-update.js?e135:41 [HMR] Checking for updates on the server...
process-update.js?e135:22 Ignored an update to unaccepted module ./src/common/components/Overview/Overview.js
onUnaccepted @ process-update.js?e135:22
hotApply @ client.js:494
cb @ process-update.js?e135:66
(anonymous) @ process-update.js?e135:82
Promise.then (async)
check @ process-update.js?e135:81
module.exports @ process-update.js?e135:42
processMessage @ client.js?fec9:268
handleMessage @ client.js?fec9:136
handleMessage @ client.js?fec9:99
process-update.js?e135:95 [HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See https://webpack.js.org/concepts/hot-module-replacement/ for more details.
logUpdates @ process-update.js?e135:95
applyCallback @ process-update.js?e135:63
(anonymous) @ process-update.js?e135:71
Promise.then (async)
cb @ process-update.js?e135:70
(anonymous) @ process-update.js?e135:82
Promise.then (async)
check @ process-update.js?e135:81
module.exports @ process-update.js?e135:42
processMessage @ client.js?fec9:268
handleMessage @ client.js?fec9:136
handleMessage @ client.js?fec9:99
process-update.js?e135:103 [HMR]  - ./src/common/components/Overview/Overview.js
(anonymous) @ process-update.js?e135:103
logUpdates @ process-update.js?e135:102
applyCallback @ process-update.js?e135:63
(anonymous) @ process-update.js?e135:71
Promise.then (async)
cb @ process-update.js?e135:70
(anonymous) @ process-update.js?e135:82
Promise.then (async)
check @ process-update.js?e135:81
module.exports @ process-update.js?e135:42
processMessage @ client.js?fec9:268
handleMessage @ client.js?fec9:136
handleMessage @ client.js?fec9:99

I've compared the XHR updates and the JS being generated; in both cases it appears to be identical between 4.9.2 and 4.10.2.

However, it's important to note that this is only an issue with dynamic import() HMR -- synchronous compile-time imports like import SomeComponent from 'some-component' will hot-reload just fine in both 4.9.2 and 4.10.2 (with the hot-loader sitting at the top route level in both cases).

I'm certainly not familiar with the Webpack code, but looking at v4.9.2...v4.10.0 there does seem to be a lot of changes that affect how requires are being handled... maybe something there has affected things?

Other relevant information:
webpack version: 4.10.2
Node.js version: 9.11.1
Operating System: MacOS 10.13.3
Additional tools:

[sokra]

Thanks for your report. It would be great if you reduce your issue to a small reproducible example. Best put this example into a github repository together with instructions how to get to the problem.

[mikehdt]

I'll see what I can put together from our current setup, and provide a repo. Thanks @sokra 👍

[mikehdt]

@sokra I've put together a test repo here, reducing it as much as I could:
https://github.com/mikehdt/webpack-dynamic-issue

The Readme documents two helpful scripts to run (to install 4.9.2 or 4.10.2 depending on if you want to test it working or in a broken state), as well as which components to change to see things work (or not).

Please let me know if I can help with any further diagnosis...

Edit:
I've done some testing of commits in between the range, it seems that this commit is the last one that was fine:
f903cd3

And this is where it broke:
d4a04b8

[sokra]

Thanks for the great repro repo. It made it easy to find the problem.