fix(rsc-mf): execute remote actions against remote origin

Author: cursoragent

tests/integration/rsc-mf/host/modern.config.ts

@@ -2,13 +2,23 @@ import path from 'path';
 import { appTools, defineConfig } from '@modern-js/app-tools';
 import { moduleFederationPlugin } from '@module-federation/modern-js-v3';
 
+const serverOnlyEmptyPath = path.join(
+  path.dirname(require.resolve('server-only')),
+  'empty.js',
+);
+const remoteOrigin = `http://127.0.0.1:${process.env.RSC_MF_REMOTE_PORT || '3008'}`;
+
 export default defineConfig({
   server: {
     rsc: true,
+    port: Number(process.env.PORT || 3007),
   },
   // Keep RSC server entries synchronous for MF+RSC handlers.
   source: {
     enableAsyncEntry: false,
+    define: {
+      __RSC_MF_REMOTE_ORIGIN__: JSON.stringify(remoteOrigin),
+    },
   },
   output: {
     polyfill: 'off',
@@ -25,29 +35,10 @@ export default defineConfig({
         chain.target('async-node');
         chain.resolve.conditionNames
           .clear()
-          .add('react-server')
-          .add('require')
-          .add('import')
-          .add('default');
-        chain.module
-          .rule('rsc-mf-ssr-no-react-server')
-          .test(/\.[cm]?[jt]sx?$/)
-          .issuerLayer('server-side-rendering')
-          .resolve.conditionNames.clear()
           .add('require')
           .add('import')
           .add('default');
-        chain.module
-          .rule('rsc-mf-host-runtime-react-alias')
-          .resource(
-            /packages[\\/]runtime[\\/]plugin-runtime[\\/]dist[\\/]esm[\\/]core[\\/].*\.mjs$/,
-          )
-          .resolve.alias.set('react$', require.resolve('react'))
-          .set('react/jsx-runtime$', require.resolve('react/jsx-runtime'))
-          .set(
-            'react/jsx-dev-runtime$',
-            require.resolve('react/jsx-dev-runtime'),
-          );
+        chain.resolve.alias.set('server-only$', serverOnlyEmptyPath);
       }
 
       chain.resolve.modules

tests/integration/rsc-mf/host/src/modern-app-env.d.ts

@@ -1,3 +1,5 @@
 /// <reference types='@modern-js/app-tools/types' />
 /// <reference types="react/canary" />
 /// <reference types="react-dom/canary" />
+
+declare const __RSC_MF_REMOTE_ORIGIN__: string;

tests/integration/rsc-mf/host/src/server-component-root/HostRemoteActionRunner.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { callServer } from '@modern-js/runtime/rsc/client';
 import { useState } from 'react';
 import RemoteClientBadge from 'rscRemote/RemoteClientBadge';
 import { RemoteClientCounter as RemoteClientCounterBridge } from 'rscRemote/RemoteClientCounter';
@@ -12,7 +11,7 @@ export default function HostRemoteActionRunner() {
   // Keep this import in the client graph so federated RSC bridge IDs
   // can map back to a concrete remote module factory at runtime.
   void RemoteClientCounterBridge;
-  registerRemoteServerCallback(callServer as any);
+  registerRemoteServerCallback(__RSC_MF_REMOTE_ORIGIN__);
   const [defaultResult, setDefaultResult] = useState('');
   const [echoResult, setEchoResult] = useState('');
   const [isPending, setIsPending] = useState(false);

tests/integration/rsc-mf/remote/src/components/registerServerCallback.ts

@@ -1,13 +1,29 @@
-import { setServerCallback } from 'rsc-mf-react-server-dom-client-browser';
+import {
+  createFromFetch,
+  createTemporaryReferenceSet,
+  encodeReply,
+  setServerCallback,
+} from 'rsc-mf-react-server-dom-client-browser';
 
-type CallServer = (id: string, args: unknown[]) => Promise<unknown>;
+let registeredRemoteOrigin = '';
 
-let hasRegisteredRemoteServerCallback = false;
-
-export function registerRemoteServerCallback(callServer: CallServer) {
-  if (hasRegisteredRemoteServerCallback) {
+export function registerRemoteServerCallback(remoteOrigin: string) {
+  if (!remoteOrigin || registeredRemoteOrigin === remoteOrigin) {
     return;
   }
-  setServerCallback(callServer as any);
-  hasRegisteredRemoteServerCallback = true;
+
+  const remoteActionUrl = new URL('/', remoteOrigin).toString();
+  setServerCallback(async (id, args) => {
+    const temporaryReferences = createTemporaryReferenceSet();
+    const response = fetch(remoteActionUrl, {
+      method: 'POST',
+      headers: {
+        Accept: 'text/x-component',
+        'x-rsc-action': id,
+      },
+      body: await encodeReply(args, { temporaryReferences }),
+    });
+    return createFromFetch(response, { temporaryReferences });
+  });
+  registeredRemoteOrigin = remoteOrigin;
 }