feat(modern-js-plugin-v3): port RSC bridge support into core

.changeset/tidy-bananas-relax.md

@@ -0,0 +1,6 @@
+---
+'@module-federation/modern-js-v3': patch
+'@module-federation/sdk': patch
+---
+
+Improve Node-side async startup remote loading by stripping browser HMR bootstrap calls, normalizing async startup container exports, and resolving var/global container shapes reliably for RSC federation flows.

apps/modernjs-rsc/README.md

@@ -0,0 +1,16 @@
+# modernjs-rsc
+
+Minimal ModernJS + Module Federation RSC example in `apps/`.
+
+## Run
+
+```bash
+pnpm nx run modernjs-rsc:serve
+```
+
+Open `http://localhost:3060`.
+
+This app enables `experiments.rsc` + `experiments.asyncStartup` and exposes:
+
+- `modernjs_rsc/ServerMessage`
+- `modernjs_rsc/ClientCounter`

apps/modernjs-rsc/modern.config.ts

@@ -0,0 +1,13 @@
+import { appTools, defineConfig } from '@modern-js/app-tools';
+import { moduleFederationPlugin } from '@module-federation/modern-js-v3';
+
+export default defineConfig({
+  server: {
+    port: 3060,
+    ssr: {
+      mode: 'stream',
+    },
+    rsc: true,
+  },
+  plugins: [appTools(), moduleFederationPlugin()],
+});

apps/modernjs-rsc/module-federation.config.ts

@@ -0,0 +1,21 @@
+import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
+
+export default createModuleFederationConfig({
+  name: 'modernjs_rsc',
+  manifest: {
+    filePath: 'static',
+  },
+  filename: 'static/remoteEntry.js',
+  exposes: {
+    './ServerMessage': './src/server/ServerMessage.tsx',
+    './ClientCounter': './src/client/ClientCounter.tsx',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+  experiments: {
+    asyncStartup: true,
+    rsc: true,
+  },
+});

apps/modernjs-rsc/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "modernjs-rsc",
+  "private": true,
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "modern dev",
+    "build": "modern build",
+    "start": "modern start",
+    "serve": "modern serve",
+    "lint": "modern lint"
+  },
+  "engines": {
+    "node": ">=16.18.1"
+  },
+  "dependencies": {
+    "@babel/runtime": "7.28.2",
+    "@modern-js/runtime": "3.0.1",
+    "@module-federation/modern-js-v3": "workspace:*",
+    "react": "~18.3.1",
+    "react-dom": "~18.3.1"
+  },
+  "devDependencies": {
+    "@modern-js/app-tools": "3.0.1",
+    "@modern-js/tsconfig": "3.0.1",
+    "@types/node": "^20.19.5",
+    "@types/react": "~18.2.0",
+    "@types/react-dom": "~18.3.0",
+    "typescript": "~5.0.4"
+  }
+}

apps/modernjs-rsc/project.json

@@ -0,0 +1,44 @@
+{
+  "name": "modernjs-rsc",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/modernjs-rsc/src",
+  "projectType": "application",
+  "tags": [],
+  "implicitDependencies": ["typescript"],
+  "targets": {
+    "build": {
+      "executor": "nx:run-commands",
+      "options": {
+        "dependsOn": [
+          {
+            "target": "build",
+            "dependencies": true
+          }
+        ],
+        "commands": [
+          {
+            "command": "cd apps/modernjs-rsc; pnpm run build",
+            "forwardAllArgs": true
+          }
+        ]
+      }
+    },
+    "serve": {
+      "executor": "nx:run-commands",
+      "options": {
+        "dependsOn": [
+          {
+            "target": "build",
+            "dependencies": true
+          }
+        ],
+        "commands": [
+          {
+            "command": "cd apps/modernjs-rsc; pnpm run dev",
+            "forwardAllArgs": false
+          }
+        ]
+      }
+    }
+  }
+}

apps/modernjs-rsc/src/client/ClientCounter.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { useState } from 'react';
+
+const ClientCounter = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <section style={{ marginTop: 16 }}>
+      <h2>Client Component</h2>
+      <button type="button" onClick={() => setCount((value) => value + 1)}>
+        Count: {count}
+      </button>
+    </section>
+  );
+};
+
+export default ClientCounter;

apps/modernjs-rsc/src/modern-app-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types='@modern-js/app-tools/types' />
+/// <reference types='@modern-js/runtime/types' />
+/// <reference types='@modern-js/runtime/types/router' />
+/// <reference types='@module-federation/modern-js-v3/types' />

apps/modernjs-rsc/src/routes/page.tsx

@@ -0,0 +1,15 @@
+import ClientCounter from '../client/ClientCounter';
+import ServerMessage from '../server/ServerMessage';
+
+const Page = async () => {
+  return (
+    <main style={{ padding: 24, fontFamily: 'sans-serif' }}>
+      <h1>ModernJS RSC + Module Federation</h1>
+      <p>This example exposes both server and client components.</p>
+      <ServerMessage />
+      <ClientCounter />
+    </main>
+  );
+};
+
+export default Page;

apps/modernjs-rsc/src/server/ServerMessage.tsx

@@ -0,0 +1,18 @@
+const wait = (ms: number) =>
+  new Promise<void>((resolve) => {
+    setTimeout(resolve, ms);
+  });
+
+const ServerMessage = async () => {
+  await wait(20);
+  const renderedAt = new Date().toISOString();
+
+  return (
+    <section style={{ marginTop: 16 }}>
+      <h2>Server Component</h2>
+      <p>Rendered at: {renderedAt}</p>
+    </section>
+  );
+};
+
+export default ServerMessage;

apps/modernjs-rsc/tsconfig.app.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node", "express"],
+    "target": "ES2015",
+    "module": "commonjs",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"],
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}

apps/modernjs-rsc/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "@modern-js/tsconfig/base",
+  "compilerOptions": {
+    "declaration": false,
+    "jsx": "preserve",
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["./src/*"],
+      "*": ["./@mf-types/*"]
+    }
+  },
+  "include": ["src", "config", "modern.config.ts", "./@mf-types"],
+  "exclude": ["**/node_modules"]
+}

packages/bridge/bridge-react/package.json

@@ -19,7 +19,8 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.es.js",
-      "require": "./dist/index.cjs.js"
+      "require": "./dist/index.cjs.js",
+      "default": "./dist/index.es.js"
     },
     "./base": {
       "types": "./dist/base.d.ts",
@@ -64,17 +65,20 @@
     "./lazy-utils": {
       "types": "./dist/lazy-utils.d.ts",
       "import": "./dist/lazy-utils.es.js",
-      "require": "./dist/lazy-utils.cjs.js"
+      "require": "./dist/lazy-utils.cjs.js",
+      "default": "./dist/lazy-utils.es.js"
     },
     "./data-fetch-utils": {
       "types": "./dist/data-fetch-utils.d.ts",
       "import": "./dist/data-fetch-utils.es.js",
-      "require": "./dist/data-fetch-utils.cjs.js"
+      "require": "./dist/data-fetch-utils.cjs.js",
+      "default": "./dist/data-fetch-utils.es.js"
     },
     "./data-fetch-server-middleware": {
       "types": "./dist/data-fetch-server-middleware.d.ts",
       "import": "./dist/data-fetch-server-middleware.es.js",
-      "require": "./dist/data-fetch-server-middleware.cjs.js"
+      "require": "./dist/data-fetch-server-middleware.cjs.js",
+      "default": "./dist/data-fetch-server-middleware.es.js"
     },
     "./lazy-load-component-plugin": {
       "types": "./dist/lazy-load-component-plugin.d.ts",

packages/dts-plugin/src/core/lib/typeScriptCompiler.ts

@@ -1,5 +1,4 @@
-import fse from 'fs-extra';
-const { ensureDirSync, writeFileSync, existsSync } = fse;
+import fsExtra from 'fs-extra';
 import crypto from 'crypto';
 import { stat, readdir, writeFile, rm, readFile } from 'fs/promises';
 import {
@@ -24,6 +23,7 @@ import { TsConfigJson } from '../interfaces/TsConfigJson';
 import { logger } from '../../server';
 
 const STARTS_WITH_SLASH = /^\//;
+const { ensureDirSync, writeFileSync, existsSync } = fsExtra;
 
 const DEFINITION_FILE_EXTENSION = '.d.ts';