HMR broken with module federation

After having a video call with @ScriptedAlchemy yesterday evening, he asked me to open an issue for HMR being broken with module federation.

• This is a bug

• Operating System: Windows 10

• Node Version: 12.16.2

• NPM Version: 6.14.4

• webpack Version: 5.0.0-beta.22

• webpack-dev-server Version: 3.11.0

• Browser: Chrome 84.0.4147.105, Firefox 79.0, Edge 84.0.522.48

Code

https://github.com/codepunkt/react-microfrontend-eval

Expected Behavior

Changes in a react component will show in the browser without a refresh.

Actual Behavior

Changes in a react component will not show in the browser without a refresh.

For Bugs; How can we reproduce the behavior?

1. clone repository
2. checkout commit b53e2a249226d96525b96213db7f1b6e43309e8b
3. run yarn on project root
4. go into federation directory
5. run yarn start in federation directory
6. open localhost:3001 in the browser
7. open federation/remote-a/src/components/Content/Content.tsx in an editor of choice, make changes to the react component in this file and save
8. browser will not show changes and throw 2 errors like these:
   • jsonp chunk loading:86 Uncaught TypeError: Cannot read property ‘push’ of undefined at window.webpackHotUpdate_federation_remote_a (jsonp chunk loading:86) at main.6fa816d24a2d1d5749e3.hot-update.js:1
   • Uncaught TypeError: Cannot set property ‘./src/components/Content/Content.tsx’ of undefined at window.webpackHotUpdate_federation_remote_a (jsonp chunk loading:82) at src_bootstrap_tsx-webpack_sharing_consume_default_react_react.6fa816d24a2d1d5749e3.hot-update.js:1

Related

Issue at webpack-dev-server: https://github.com/webpack/webpack-dev-server/issues/2688