fix: preserve Router context across SSR bundlers (#6)

Author: dmchoi77

.changeset/tidy-router-shares.md

@@ -0,0 +1,5 @@
+---
+"@module-federation/tanstack": patch
+---
+
+Share TanStack Router runtimes by default so router-aware remote components can preserve the host Router context across SSR bundlers.

apps/rsbuild-host/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@module-federation/runtime": "2.9.2",
     "@tanstack/react-router": "1.170.41",
+    "@tanstack/router-core": "1.171.34",
     "@tanstack/react-start": "1.168.60",
     "example-host-context": "workspace:*",
     "react": "19.3.0",

apps/rsbuild-host/rsbuild.config.ts

@@ -14,7 +14,9 @@ export default defineConfig({
         dts: false,
         name: "tanstack_rsbuild_host",
         // Workspace dependencies declare "workspace:*", which is not a semver range.
-        shared: { "example-host-context": { requiredVersion: "*", singleton: true } },
+        shared: {
+          "example-host-context": { requiredVersion: "*", singleton: true },
+        },
         // Resolve remotes on demand so one offline remote cannot block host startup.
         shareStrategy: "loaded-first",
         remotes: {

apps/rsbuild-host/src/routes/index.tsx

@@ -18,6 +18,10 @@ function Home() {
           fallback="Loading the Vite remote…"
           remote="tanstack_vite_remote/StatusCard"
         />
+        <RemoteCardSlot
+          fallback="Loading the Router-aware remote…"
+          remote="tanstack_vite_remote/RouterCard"
+        />
       </div>
     </main>
   );

apps/rsbuild-ssr-host/package.json

@@ -14,6 +14,7 @@
     "@module-federation/runtime": "2.9.2",
     "@module-federation/vite": "1.23.3",
     "@tanstack/react-router": "1.170.41",
+    "@tanstack/router-core": "1.171.34",
     "@tanstack/react-start": "1.168.60",
     "example-host-context": "workspace:*",
     "react": "19.3.0",

apps/rsbuild-ssr-host/rsbuild.config.ts

@@ -14,7 +14,9 @@ export default defineConfig({
         dts: false,
         name: "tanstack_rsbuild_ssr_host",
         // Workspace dependencies declare "workspace:*", which is not a semver range.
-        shared: { "example-host-context": { requiredVersion: "*", singleton: true } },
+        shared: {
+          "example-host-context": { requiredVersion: "*", singleton: true },
+        },
         shareStrategy: "loaded-first",
         remotes: {
           tanstack_rsbuild_ssr_remote:

apps/rsbuild-ssr-host/src/remote.d.ts

@@ -11,3 +11,10 @@ declare module "tanstack_vite_remote/StatusCard" {
   const StatusCard: ComponentType;
   export default StatusCard;
 }
+
+declare module "tanstack_vite_remote/RouterCard" {
+  import type { ComponentType } from "react";
+
+  const RouterCard: ComponentType;
+  export default RouterCard;
+}

apps/rsbuild-ssr-host/src/routes/index.tsx

@@ -6,6 +6,7 @@ import { RemoteBoundary } from "../components/RemoteBoundary";
 // outage renders the remote once it is back.
 const RsbuildStatusCard = lazyRemote(() => import("tanstack_rsbuild_ssr_remote/StatusCard"));
 const ViteStatusCard = lazyRemote(() => import("tanstack_vite_remote/StatusCard"));
+const ViteRouterCard = lazyRemote(() => import("tanstack_vite_remote/RouterCard"));
 
 // Manifests of the remotes this route renders on the server.
 const serverRenderedManifests = [
@@ -25,6 +26,7 @@ export const Route = createFileRoute("/")({
       ).then((lists) => lists.flat()),
       import("tanstack_rsbuild_ssr_remote/StatusCard").catch(() => null),
       import("tanstack_vite_remote/StatusCard").catch(() => null),
+      import("tanstack_vite_remote/RouterCard").catch(() => null),
     ]);
     return { stylesheets };
   },
@@ -51,6 +53,9 @@ function Home() {
         <RemoteBoundary fallback="Loading the Vite remote…" name="Vite remote">
           <ViteStatusCard />
         </RemoteBoundary>
+        <RemoteBoundary fallback="Loading the Router-aware remote…" name="Router-aware remote">
+          <ViteRouterCard />
+        </RemoteBoundary>
       </div>
     </main>
   );

apps/vite-host/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@module-federation/runtime": "2.9.2",
     "@tanstack/react-router": "1.170.41",
+    "@tanstack/router-core": "1.171.34",
     "@tanstack/react-start": "1.168.60",
     "example-host-context": "workspace:*",
     "react": "19.3.0",

apps/vite-host/src/remote.d.ts

@@ -5,6 +5,13 @@ declare module "tanstack_vite_remote/StatusCard" {
   export default StatusCard;
 }
 
+declare module "tanstack_vite_remote/RouterCard" {
+  import type { ComponentType } from "react";
+
+  const RouterCard: ComponentType;
+  export default RouterCard;
+}
+
 declare module "tanstack_rsbuild_remote/StatusCard" {
   import type { ComponentType } from "react";