nx + module-federation runtime + @tanstack/react-router

[dourkk]

Hi,

I’m currently working on a PoC that involves integrating Module Federation Runtime with @tanstack/react-router. Here’s what I’m trying to achieve:

• The host application uses @tanstack/react-router and loads remote_a and remote_b through Module Federation Runtime.
• Both remote_a and remote_b are micro-frontends that also use @tanstack/react-router.

While I was able to get this working at build time using Module Federation, my goal is to leverage runtime Module Federation. However, when I attempt to navigate to a remote app from the host, I encounter the following error:

https://github.com/dourkk/nx-module-federation-tanstack-router?tab=readme-ov-file#actual-behavior

It seems that the issue might be related to @tanstack/react-router not being shared or available at runtime. Has anyone successfully implemented Module Federation with @tanstack/react-router at runtime?

Here’s a PoC that reproduces the issue. https://github.com/dourkk/nx-module-federation-tanstack-router

Any insights or suggestions would be greatly appreciated!

Thanks in advance,

[ScriptedAlchemy]

your use of the runtime does not have any shared in it, youd have to either use the compile time plugin and shared or add shared to init: https://module-federation.io/guide/basic/runtime.html#loadshare for your host, since currently host does not provide any shared modules, the remotes are loading their own shared react versions etc, not using a singleton version

[dourkk]

Thanks @ScriptedAlchemy, I was able to resolve the issue using a compile-time plugin and shared modules. I also switched to Module Federation Bridge to address some errors related to @tanstack/react-router. There are still a few warnings related to @tanstack/react-router, but the setup is more stable than before. I'll continue working on my PoC to address these remaining warnings.

[ScriptedAlchemy]

Awesome!