@tanstack/react-router and Module Federation

[dourkk]

Hello,

I am currently working on a proof of concept where I am using Module Federation at runtime to load several micro-frontends into a host application. Both the host and the micro-frontends are using @tanstack/react-router, and each micro-frontend has its own RouterProvider nested within the host’s RouterProvider. While I’ve managed to get a stable setup, I'm encountering the following warnings:

hook.js:608 Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported. Error Component Stack
    at RouterContextProvider (RouterProvider.tsx:61:3)
    at RouterProvider (RouterProvider.tsx:93:5)
    at div (<anonymous>)
    at App (<anonymous>)

vendor.js:10160 Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported. Error Component Stack
    at RouterContextProvider (vendor.js:8967:3)
    at RouterProvider (vendor.js:8986:27)
    at div (<anonymous>)
    at div (<anonymous>)
    at div (<anonymous>)
    at App (<anonymous>)

From what I’ve gathered in the documentation, it seems that RouterProvider can be nested. However, I suspect these warnings arise because of the multiple instances of RouterProvider. Has anyone encountered this issue before, and if so, are there any solutions or best practices to resolve it? Any insights would be greatly appreciated! 🙏

For reference, here’s the PoC with detailed reproduction steps in the README:
https://github.com/dourkk/nx-module-federation-tanstack-router