HMR broken with module federation

[codepunkt]

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: webpack/webpack-dev-server#2688

[alexander-akait]

Let's close in favor webpack/webpack-dev-server#2692, sorry for the inconvenience

[tgelu]

Let's close in favor webpack/webpack-dev-server#2692, sorry for the inconvenience

But that other issue seems to describe a different broken behaviour, not related to HMR.

[yuzhanglong]

same problem happened to me, did you fix it?

[IgorStetsiuk]

Hey! I've got the same issue, no changes are reflected after I made it in the source base. I'm using CRA with react-scripts 5.0.0. Has anybody found a solution?

[rzkhosroshahi]

Is there any temporary solution to solve this issue? It works just when I remove module federation plugin from webpack, otherwise, It doesn't work 😕

[clyfish]

Is there any temporary solution to solve this issue? It works just when I remove module federation plugin from webpack, otherwise, It doesn't work 😕

@rzkhosroshahi , try this:
webpack/webpack-dev-server#3038 (comment)

[rdenman]

This is far from an elegant solution, but it works well when you're developing an MFE standalone (not being consumed). If you don't expose anything in your Module Federation config, HMR works just fine. Generally when I'm doing local dev, I don't need to expose anything. So, I just wipe out exposes altogether. To avoid code changes every time, I do this with an env variable ENABLE_HMR, then setup my exposes like this: exposes: process.env.ENABLE_HMR ? undefined : { my config }

Again, this only works when you're doing standalone dev work in an MFE, and will break things if you want to consume your modules from a container (need to uncomment the env variable in that case). But it's a quick-n-dirty solution for local standalone work

[hosseinmd]

This is not a good solution, but is an idea for finding a good one.

Add this to your source code in repack projects

if (__DEV__) {
  require('@callstack/repack/dist/modules/WebpackHMRClient.js');
}