[HMR]: Support Module Federation HMR

[nyqykk]

If your project's hmr fail, please make sure the following steps.

1. Make sure your socket of hmr is connected and when you modify your project, it can receive hot update file.
2. If you are React project, make sure your root component is named exports instead of anonymous exports

If these steps is ok, you are not far from success, set configuration like

1. Set 「React」 and 「ReactDOM」as shared module in your MF plugin
2. Set your build tool's uniqueName to make sure every project is not repeated.
3. Install React Devtools in chrome extension market.

After doing this you can high probability of getting hmr success. If you still can not get hmr, please provide codesandbox here, i will help you.

[sudhakar-selva]

does it work in old version of module federation? i.e one exported by webpack, not enhanced version

[sudhakar-selva]

HMR is enabled, but its doing a full page reload instead of hot update - currently using older version of module federation

[nyqykk]

Dose all conditions above are satisfied？If you have checked it，you can give me a online ide to help you

[sudhakar-selva]

Update

• without pmmmwh/react-refresh-webpack-plugin pkg - full page refresh on change

• with pmmmwh/react-refresh-webpack-plugin pkg and host app also running locally - HMR working 🚀, thanks🙌

Next Steps

Host app needs to be running locally as well for this to work (I think React and React-DOM production version is being used without this and causing some issues), checking how to resolve this

[nyqykk]

That is great.
Online host mode i have a pr to solve hmr problem，it is finished yet #2178，but it requires new version of MF

[sudhakar-selva]

Thanks again for the help @nyqykk. Great to see HMR working in federated apps😍.

[Coly010]

Weighing in here. Regarding LOCAL DEVELOPMENT ONLY.

Everything mentioned in the original post here was configured correctly on our end, but we still couldn't get HMR to work correctly for our setup with React using Old MF builtin from webpack when developing locally.

Updating JUST our top-most host application's config by doing:

config.optimization.runtimeChunk = 'single'

Fixed HMR for host + remotes.

[jucian0]

Does someone know how to config it to rsbuild?

[nyqykk]

use bundleChain to config output.uniqueName and you need the newest version of rsbuild

[jucian0]

Worked, thanks

[tzachbon]

This was the one for me! Thanks

[digitalhank]

i assume this does not work in nextjs?

[nyqykk]

can you provide a cloud ide to show this problem?

[digitalhank]

sorry it was a question, i have not attempted yet. iirc HMR requires using manifest instead of remoteEntry, I was experiencing some issues locally with manifest on nextjs so never got around to attempt this.

[MKraust]

I have a problem with slow HMR because of dts generation. With dts: false compile time is ~1 sec, but with dts option enabled compile time increases to 4-5 seconds which drastically slows down HMR.
Is there an option to generate dts, but push HMR message to browser without awaiting generation to complete?

[ScriptedAlchemy]

Yes - you will be bottlenecked by the slowest part of your compilation. Which in this case is typescript not rust.
It may be possible to perform non blocking compilation updates on hmr - depending on what direction youre hot reloading in.

[ScriptedAlchemy]

Consider opening a git issue about this

[marcandrews]

Is this working for runtime remotes?

HMR in the rspack_hmr runhost example doesn't seem to work.

[nyqykk]

sorry for missing this message, i have checked it, use app2 as provider and runhost as host, hmr worked normally

[AdamJSoftware]

I am experiencing the same issue. In the console, I see that the app is updated. But nothing is reflected in the UI

(In this case, I removed the exclamation marks). Update shows in the console but the UI stays the same

[moalhaddar]

How can i configure HMR with webpack ModuleFederationPlugin?

[nyqykk]

sorry i do not understand, can you explain it in detail?

[alhawk]

I followed this guide here:
https://module-federation.io/guide/start/quick-start.html

I have set hmr to true and seems the hmr is still not working. It requires a refresh to the host app when I made an update to remote app.

[ScriptedAlchemy]

Does remote import exposed module from host

[trystan2k]

Hi @nyqykk,

I am trying to setup a simple Module Federation with Webpack and HMR project but I cannot make it work correctly.

I have gone down to the minimal case that does not work, to be sure I am starting right and then going up but it is failing in the first step.

I have uploaded the project here : https://stackblitz.com/edit/webpack-webpack-js-org-exj81u?file=apps%2Fremote%2Fsrc%2FApp.tsx

To run it, just open the terminal in stackblitz and do:
cd apps/remote
npm run dev
Then try to edit the App.tsx and see that it show an error in the console and page is not updated.
This is the error:

If I remove the ModuleFederationPlugin from the Webpack config file, the HMR work as expected.

Could you help me find out what is wrong here ?

Thank you !

[trystan2k]

I hope this helps.

Here’s how I handled it:

When updating rsbuild in router-demo to the latest version, you need to add a few additional configurations. Since the host includes .less files, you need to install @rsbuild/plugin-less and add it to the plugins configuration.

plugins: [pluginReact(), pluginLess()]

Since multiple versions of React are being used, you need to handle it with aliases to ensure that only a single React bundle is used. Although I haven’t looked into it in detail, it seems that the path resolution method in rsbuild has changed with the update, or a new option may have been added. In the case of the host, react and react-dom are not defined in the package.json.

In the previous version, it appears that node_modules from bridge-react were referenced to load react, but it seems that this is no longer working.

Update the paths for react and react-dom in the alias configuration. As a temporary solution, I retrieved the node_modules path using pnpm root and tested it. There might be a smarter way to handle this.

// router-host-2000

// pnpm root path
...
const rootPath = execSync(`pnpm root -w`).toString().trim();
return defineConfig({
  source: {
    // Prevent pnpm workspace from causing dev dependencies on npm to take effect
    alias: {
      react: path.resolve(rootPath, 'react'),
      'react-dom': path.resolve(rootPath, 'react-dom'),
    },
  },
  ...

After making these changes, HMR works correctly.

Thanks @WillowRyu.

I tried to apply these changes but it still does not work.

I mean, the HMR for changes in Host, it does work (as it worked before your changes), but if I change something in 'router-remote2-2002', the HMR does not work.

Does it work for you ? If so, can you detail a bit more the changes you did ?

I have change the host and remotes with:

1. Updated package.json with latest rsbuild version
2. Added the alias with pnpm root you mentioned
3. Included the pluginLess for router- host-2000

I now seen this error in terminal:
router-host-2000/src/App.tsx:1:1
⚠ No required version specified and unable to automatically determine one. Unable to find required version for "react" in description file (/Users/todd/Documents/GFT/Repos/core/apps/router-demo/router-host-2000/package.json). It need to be in dependencies, devDependencies or peerDependencies. file: shared module react

Even thought, the HMR for host works, as I mentioned before, only the Remote ones does not.

I am missing somthing or doing something wrong ?

Thanks !

[nyqykk]

I hope this helps.
Here’s how I handled it:
When updating rsbuild in router-demo to the latest version, you need to add a few additional configurations. Since the host includes .less files, you need to install @rsbuild/plugin-less and add it to the plugins configuration.

plugins: [pluginReact(), pluginLess()]

Since multiple versions of React are being used, you need to handle it with aliases to ensure that only a single React bundle is used. Although I haven’t looked into it in detail, it seems that the path resolution method in rsbuild has changed with the update, or a new option may have been added. In the case of the host, react and react-dom are not defined in the package.json.
In the previous version, it appears that node_modules from bridge-react were referenced to load react, but it seems that this is no longer working.
Update the paths for react and react-dom in the alias configuration. As a temporary solution, I retrieved the node_modules path using pnpm root and tested it. There might be a smarter way to handle this.

// router-host-2000

// pnpm root path
...
const rootPath = execSync(`pnpm root -w`).toString().trim();
return defineConfig({
  source: {
    // Prevent pnpm workspace from causing dev dependencies on npm to take effect
    alias: {
      react: path.resolve(rootPath, 'react'),
      'react-dom': path.resolve(rootPath, 'react-dom'),
    },
  },
  ...

After making these changes, HMR works correctly.

Thanks @WillowRyu.

I tried to apply these changes but it still does not work.

I mean, the HMR for changes in Host, it does work (as it worked before your changes), but if I change something in 'router-remote2-2002', the HMR does not work.

Does it work for you ? If so, can you detail a bit more the changes you did ?

I have change the host and remotes with:

1. Updated package.json with latest rsbuild version
2. Added the alias with pnpm root you mentioned
3. Included the pluginLess for router- host-2000

I now seen this error in terminal: router-host-2000/src/App.tsx:1:1 ⚠ No required version specified and unable to automatically determine one. Unable to find required version for "react" in description file (/Users/todd/Documents/GFT/Repos/core/apps/router-demo/router-host-2000/package.json). It need to be in dependencies, devDependencies or peerDependencies. file: shared module react

Even thought, the HMR for host works, as I mentioned before, only the Remote ones does not.

I am missing somthing or doing something wrong ?

Thanks !

do not use alpha or beta version, just use latest version of rsbuild, other version is not stable
i have tried the latest version of rsbuild 0.7.10, it is ok

[trystan2k]

do not use alpha or beta version, just use latest version of rsbuild, other version is not stable i have tried the latest version of rsbuild 0.7.10, it is ok

Oh, ok. Was just reporting in case it was a bug introduced in 1.0-alpha/beta and could end in the final version.

I will keep with stable versions then. Thanks

[nyqykk]

ok i have checked it, chrome do not get hot update file, so the alpha version hmr fail, this is caused by rsbuild

[artieeez]

do not use alpha or beta version, just use latest version of rsbuild, other version is not stable i have tried the latest version of rsbuild 0.7.10, it is ok

Oh, ok. Was just reporting in case it was a bug introduced in 1.0-alpha/beta and could end in the final version.

I will keep with stable versions then. Thanks

It seems that the issue still exists in the final version. I also had to downgrade rsbuild to get HMR working on both the host and the remote.

[cain]

Hey legends!

Im having an issue with HMR on mf v2 with rsbuild react host and webpack remotes. The page does a full refresh on update.

Uncaught TypeError: self.webpackHotUpdatemfe_grow is not a function
    at __federation_expose_default_export.8a726ecadf75f200f698.hot-update.js:10:33

I dont have a replication at the moment, but wondering if anyone else has had this issue?