Bidirectional Module Federation Sharing is Not Working – Browser Hangs on Startup with Numerous Warnings

[Emehado]

There is a problem with bidirectional module federation between micro frontends. Upon loading the application, the browser hangs and is unresponsive, with numerous warnings in the console.

Steps to Reproduce

• clone https://github.com/Emehado/react-microfrontend-demo/tree/issue/bidirectional-hangs-on-startup
• Start the application.
• Open the application in the browser.

[zhangHongEn]

#179

This is indeed a very important issue. Version 1.1.3 is working fine, and I will definitely fix it this week.

[Emehado]

Thanks for the quick response @zhangHongEn but just tested with v1.1.3 and it also has same problem.

[zhangHongEn]

I tried it, but everything works fine.

[gioboa]

@Emehado can you share with us your system info please?

npx envinfo --system --binaries --browsers

[Emehado]

@gioboa here you go

System:
    OS: macOS 15.1
    CPU: (10) x64 Apple M1 Pro
    Memory: 23.71 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.17.0 - ~/.volta/tools/image/node/20.17.0/bin/node
    Yarn: 1.22.18 - ~/.volta/tools/image/yarn/1.22.18/bin/yarn
    npm: 10.8.2 - ~/.volta/tools/image/node/20.17.0/bin/npm
    pnpm: 9.12.3 - ~/.volta/bin/pnpm
    Watchman: 2024.10.07.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 130.1.71.121
    Chrome: 130.0.6723.117
    Edge: 130.0.2849.80
    Safari: 18.1

[gioboa]

@Emehado You are doing a recursive scenario 🤔
host -> remote -> host --> remote -> host [...]
What's the purpose of this?

[Emehado]

@gioboa, The purpose is to be able to share code vice-versa. If bi-directional code sharing doesn't work, it means you'd need to have a third MFE which can share code to your host and remotes. If Bi-directional works fine, then you could expose modules from your host to be used in remotes. (eg. sharing color theme state). Also, I'm not sure what you mean by recursive. I found this concept which is supposed to work fine and defined as Bi-directional. Similar case is described here.

Is this not correct behavior?

[gioboa]

The problem is that Remote app is loading the Host

if you need to share things you can look at this Vue example I did

[Emehado]

That's just a bad example. I can edit the example repo to only load some component from the host instead of the entire host and the problem would still persist.

Also I see your example but wouldn't that also require a rebuild of all dependents? if yes, then that might defeat purpose of runtime code sharing.

[gioboa]

In my example you can share things from mfes without rebuilding anything. I'm looking forward to seeing the new example.

[zhangHongEn]

@Emehado I switched to your branch and did reproduce the issue. Have you tried using Webpack or Rspack?

[zhangHongEn]

This feature can be implemented, but it requires ensuring that @module-federation/core supports it.

[Emehado]

@zhangHongEn I tried using rsbuild which supports this feature but HMR I get from rsbuild was not great (4s) and when I add module federation, it goes nuts. Maybe I'm doing somethig wrong but Vite on the other hand is its still almost instantaneous. That's why I have resolved to use vite thus far.

[Emehado]

@gioboa , I have updated the example branch to only consume a component from the host instead of the entire host.
https://github.com/Emehado/react-microfrontend-demo/tree/issue/bidirectional-hangs-on-startup.

[ScriptedAlchemy]

@zhangHongEn I tried using rsbuild which supports this feature but HMR I get from rsbuild was not great (4s) and when I add module federation, it goes nuts. Maybe I'm doing somethig wrong but Vite on the other hand is its still almost instantaneous. That's why I have resolved to use vite thus far.

Turn off typescript dts stuff. Our remote type generation accounts for 95% of the slowdown.

Dts:false on the plugin and hmr will take 50ms or less.

[zhangHongEn]

@ScriptedAlchemy Does rspack support circular references where the host imports a remote, and the remote imports the host?

[ScriptedAlchemy]

Yes. Nested circular and multi cyclic as well as host uses own remote or remote uses hosts remote patterns are all supported

[Emehado]

Thanks @ScriptedAlchemy, But without module federation, HMR was already much slower using rsbuild. Any other pointers that could be causing that? Testing with a fresh project was lightning fast, I would really love to push through with rsbuild if I could get HMR to vite-like speed.

[ScriptedAlchemy]

Do you have a repo or zoom call so I can discuss? Dm me on Twitter.

Bytedance has some of the world's largest apps and the slowest hmr on record was 1s, the repo is 40gb