Support for multiple router instances (nested RouteProviders)

[piatrashkakanstantinas]

In our use case we have multiple router instances (difficult to change architecturally):

<RouterProvider /> //instanceA, some route includes <RouterProvider /> with instanceB

Currently the required functionality seems to work, but when hmr is enabled via build plugin, root route component from outer router is used instead of innerRouter (visual result in screenshot)

Current workaround is to set window.__TSR_ROUTER__ to undefined after router creation or disable hmr. I'm wondering if there is some sort of option I'm missing?

[hanityx]

I think this might be related to #7921. That issue hits an invalid hook call rather than the duplicated layout here, but the underlying HMR behavior looks pretty similar.

The Vite HMR code checks window.TSR_ROUTER even during the initial route-module import in dev. So if the inner root is loaded while that global points to the outer router, it can end up updating the wrong route. That could also explain why the outer header shows up again in the inner router in your screenshot.

#7937 was superseded by #8277, which is still open and changes this area so route updates stay associated with the router that owns the route.

I wouldn't use window.TSR_ROUTER = undefined as a permanent workaround though. I'd first try the same setup with a production build/preview. If the duplicate only happens in dev, that would point pretty strongly at the router plugin/HMR path rather than nested RouterProviders themselves.

[piatrashkakanstantinas]

Interestingly, downgrading to 1.168.16 (using rsbuild, not sure how many differences there are between implementations) throws an error instead of duplicated layout:

Uncaught TypeError: Cannot read properties of undefined (reading 'get')
    at handleRouteUpdate (__root.tsx:72:1)
    at ./src/routes/__root.tsx (__root.tsx:135:1)
    at __webpack_require__ (javascript,import { init } from 'D:/dip-web/node_modules/.pnpm/@rsbuild+core@2.1.9_@module-federation+runtime-tools@2.9.0/node_modules/@rsbuild/core/dist/client/hmr.js';
import 'D:/dip-web/node_modules/.pnpm/@rsbuild+core@2.1.9_@module-federation+runtime-tools@2.9.0/node_modules/@rsbuild/core/dist/client/overlay.js';

Confirming that issue is hmr related - issue does not occur when hmr is disabled. Will wait for #8277 to be merged to test things out.