feat: add Rsbuild adapter and interop examples

Author: Nsttt

.gitignore

@@ -1,6 +1,8 @@
 node_modules/
 dist/
 .turbo/
+.mf/
+@mf-types/
 *.log
 pnpm-debug.log*
 coverage/

README.md

@@ -1,23 +1,32 @@
 # @module-federation/tanstack
 
-Module Federation support for TanStack Start, built on the Vite integration.
+Module Federation support for TanStack Start on Vite and Rsbuild. Rsbuild uses
+Rspack under the hood.
 
 ## Install
 
 ```bash
 pnpm add @module-federation/tanstack @tanstack/react-start
 ```
 
+Install the adapter for the bundler you use. They are optional peers so an
+Rsbuild-only application does not install or resolve the Vite adapter, and a
+Vite-only application does not install or resolve the Rsbuild adapter.
+
+```bash
+pnpm add @module-federation/vite vite               # Vite
+pnpm add @module-federation/rsbuild-plugin @rsbuild/core # Rsbuild
+```
+
 ## Configure
 
 The federation wrapper must come before `tanstackStart()` so Module Federation
 can normalize TanStack's client and SSR entrypoints:
 
 ```ts
-import { tanstackStartModuleFederation } from "@module-federation/tanstack";
+import { tanstackStartModuleFederation } from "@module-federation/tanstack/vite";
 import { tanstackStart } from "@tanstack/react-start/plugin/vite";
 import react from "@vitejs/plugin-react";
-import { nitro } from "nitro/vite";
 import { defineConfig } from "vite";
 
 export default defineConfig({
@@ -34,7 +43,6 @@ export default defineConfig({
     }),
     tanstackStart(),
     react(),
-    nitro(),
   ],
 });
 ```
@@ -51,15 +59,51 @@ The package supports Node 22.18+, 24.11+, and 26+, plus Vite 7/8 and TanStack
 Start 1.x. Use Vite 8 when developing SSR hosts that load remotes; Vite 7
 remains supported for production builds.
 
+The package root remains a Vite compatibility export. New Vite projects can
+import `/vite` explicitly. Rsbuild projects must import `/rsbuild`:
+
+```ts
+import { defineConfig } from "@rsbuild/core";
+import { pluginReact } from "@rsbuild/plugin-react";
+import { tanstackStart } from "@tanstack/react-start/plugin/rsbuild";
+import { tanstackStartModuleFederation } from "@module-federation/tanstack/rsbuild";
+
+export default defineConfig({
+  plugins: [
+    pluginReact(),
+    tanstackStart(),
+    ...tanstackStartModuleFederation({
+      federation: {
+        name: "host",
+        remotes: { remote: "remote@https://example.test/mf-manifest.json" },
+      },
+    }),
+  ],
+});
+```
+
+The Rsbuild adapter registers browser and SSR federation plugins by default. It
+emits script-compatible browser output and async-node CommonJS SSR output so
+its manifest can be consumed by Vite and Rsbuild hosts. The wrapper adds eager,
+singleton `react` and `react-dom` entries without changing the caller's config
+object. Set `server: false` for browser-only remotes.
+
+Server federation mode emits `dist/server/index.cjs`; browser-only mode keeps
+TanStack Start's standard `dist/server/index.js` entry.
+
 ## Example
 
-The workspace includes two TanStack Start apps. `apps/remote` exposes a
-stateful React card, and `apps/host` consumes it through this package.
+The workspace includes Vite and Rsbuild pairs. `apps/remote` exposes a
+stateful React card to `apps/host`. `apps/rsbuild-remote` exposes a second card
+to the Vite host, while `apps/rsbuild-host` consumes the Vite remote. Both
+cross-bundler links use manifest URLs. They render after hydration, so this is
+browser interop coverage, not an unverified SSR interoperability claim.
 
 ```bash
 pnpm install
 pnpm start
 ```
 
-Open the host at http://localhost:3000. The remote also runs as its own
-TanStack Start application at http://localhost:3001.
+This starts all four applications so both same-bundler and cross-bundler paths
+are available. Open the Vite host at http://localhost:3000 or the Rsbuild host
+at http://localhost:3003.

apps/README.md

@@ -1,4 +1,4 @@
-# TanStack Start example
+# TanStack Start examples
 
 Both sides of this example are TanStack Start applications.
 
@@ -18,3 +18,10 @@ React and React DOM use the wrapper's singleton defaults.
 Each package's `start` script runs Vite's development server. In Vite's CLI,
 the bare `vite` command means “start”; the literal `vite start` command would
 treat `start` as a project directory.
+
+`rsbuild-remote` exposes the same kind of card through Rspack with a browser
+manifest. Both hosts consume both remotes by manifest URL after hydration.
+These examples exercise same-bundler and cross-bundler client interoperability;
+they do not claim that cross-bundler SSR remote rendering is supported.
+
+`pnpm start` runs all four applications on ports 3000 through 3003.

apps/host/src/remote.d.ts

@@ -4,3 +4,10 @@ declare module "tanstack_remote/StatusCard" {
   const StatusCard: ComponentType;
   export default StatusCard;
 }
+
+declare module "tanstack_rsbuild_remote/StatusCard" {
+  import type { ComponentType } from "react";
+
+  const StatusCard: ComponentType;
+  export default StatusCard;
+}

apps/host/src/routes/index.tsx

@@ -1,7 +1,8 @@
 import { createFileRoute } from "@tanstack/react-router";
-import { lazy, Suspense } from "react";
+import { lazy, Suspense, useEffect, useState } from "react";
 
 const RemoteStatusCard = lazy(() => import("tanstack_remote/StatusCard"));
+const RsbuildStatusCard = lazy(() => import("tanstack_rsbuild_remote/StatusCard"));
 
 export const Route = createFileRoute("/")({
   loader: () => import("tanstack_remote/StatusCard").then(() => null),
@@ -31,7 +32,25 @@ function Home() {
         <Suspense fallback={<div className="remote-loading">Loading the remote app…</div>}>
           <RemoteStatusCard />
         </Suspense>
+
+        <RsbuildRemoteSlot />
       </section>
     </main>
   );
 }
+
+function RsbuildRemoteSlot() {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return <div className="remote-loading">Rsbuild remote loads after hydration</div>;
+
+  return (
+    <Suspense fallback={<div className="remote-loading">Loading the Rsbuild remote…</div>}>
+      <RsbuildStatusCard />
+    </Suspense>
+  );
+}

apps/host/vite.config.ts

@@ -14,6 +14,11 @@ export default defineConfig({
           name: "tanstack_remote",
           entry: "http://127.0.0.1:3001/remoteEntry.js",
         },
+        tanstack_rsbuild_remote: {
+          type: "global",
+          name: "tanstack_rsbuild_remote",
+          entry: "http://127.0.0.1:3002/mf-manifest.json",
+        },
       },
     }),
     tanstackStart(),

apps/rsbuild-host/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "tanstack-start-rsbuild-host",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "build": "rsbuild build",
+    "dev": "rsbuild dev --port 3003 --strict-port",
+    "start": "rsbuild dev --host 127.0.0.1 --port 3003 --strict-port",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@module-federation/runtime": "2.9.0",
+    "@tanstack/react-router": "1.170.38",
+    "@tanstack/react-start": "1.168.56",
+    "react": "19.3.0",
+    "react-dom": "19.3.0"
+  },
+  "devDependencies": {
+    "@module-federation/rsbuild-plugin": "2.9.0",
+    "@module-federation/tanstack": "workspace:*",
+    "@rsbuild/core": "2.2.8",
+    "@rsbuild/plugin-react": "2.1.0",
+    "@types/node": "24.10.1",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "typescript": "6.0.3"
+  }
+}

apps/rsbuild-host/rsbuild.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from "@rsbuild/core";
+import { pluginReact } from "@rsbuild/plugin-react";
+import { tanstackStart } from "@tanstack/react-start/plugin/rsbuild";
+import { tanstackStartModuleFederation } from "@module-federation/tanstack/rsbuild";
+
+export default defineConfig({
+  dev: { lazyCompilation: false },
+  server: { host: "127.0.0.1", port: 3003 },
+  plugins: [
+    pluginReact(),
+    tanstackStart(),
+    ...tanstackStartModuleFederation({
+      federation: {
+        dts: false,
+        name: "tanstack_rsbuild_host",
+        remotes: {
+          tanstack_remote: "tanstack_remote@http://127.0.0.1:3001/mf-manifest.json",
+          tanstack_rsbuild_remote: "tanstack_rsbuild_remote@http://127.0.0.1:3002/mf-manifest.json",
+        },
+      },
+      server: false,
+    }),
+  ],
+});

apps/rsbuild-host/src/assets.d.ts

@@ -0,0 +1,4 @@
+declare module "*.css?url" {
+  const href: string;
+  export default href;
+}

apps/rsbuild-host/src/components/RemoteCardSlot.tsx

@@ -0,0 +1,38 @@
+import { loadRemote } from "@module-federation/runtime";
+import { useEffect, useState, type ComponentType } from "react";
+
+type RemoteModule = {
+  default: ComponentType;
+};
+
+export function RemoteCardSlot({ fallback, remote }: { fallback: string; remote: string }) {
+  const [RemoteCard, setRemoteCard] = useState<ComponentType | null>(null);
+  const [failed, setFailed] = useState(false);
+
+  useEffect(() => {
+    let active = true;
+    setRemoteCard(null);
+    setFailed(false);
+
+    loadRemote<RemoteModule>(remote)
+      .then((remoteModule) => {
+        if (!active) return;
+        if (remoteModule?.default) {
+          setRemoteCard(() => remoteModule.default);
+        } else {
+          setFailed(true);
+        }
+      })
+      .catch(() => {
+        if (active) setFailed(true);
+      });
+
+    return () => {
+      active = false;
+    };
+  }, [remote]);
+
+  if (failed) return <div className="remote-loading">Remote unavailable</div>;
+  if (!RemoteCard) return <div className="remote-loading">{fallback}</div>;
+  return <RemoteCard />;
+}