fix(rsc-mf): proxy remote async assets via host server

Author: cursoragent

tests/integration/rsc-mf/host/runtime/forceRemotePublicPath.ts

@@ -0,0 +1,31 @@
+import type { ModuleFederationRuntimePlugin } from '@module-federation/modern-js-v3';
+
+const forceRemotePublicPath = (): ModuleFederationRuntimePlugin => ({
+  name: 'rsc-mf-force-remote-public-path',
+  loadRemoteSnapshot(args: any) {
+    const { remoteInfo, remoteSnapshot } = args;
+    if (remoteInfo?.alias !== 'rscRemote' || !remoteSnapshot) {
+      return args;
+    }
+
+    const entry = remoteInfo?.entry;
+    if (!entry || typeof entry !== 'string') {
+      return args;
+    }
+    const remotePublicPath = `${new URL(entry).origin}/`;
+
+    if ('publicPath' in remoteSnapshot) {
+      remoteSnapshot.publicPath = remotePublicPath;
+    }
+    if (remoteSnapshot.metaData && 'publicPath' in remoteSnapshot.metaData) {
+      remoteSnapshot.metaData.publicPath = remotePublicPath;
+    }
+    if (remoteSnapshot.metaData && 'ssrPublicPath' in remoteSnapshot.metaData) {
+      remoteSnapshot.metaData.ssrPublicPath = `${remotePublicPath}bundles/`;
+    }
+
+    return args;
+  },
+});
+
+export default forceRemotePublicPath;

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

@@ -0,0 +1,58 @@
+import {
+  type MiddlewareHandler,
+  defineServerConfig,
+} from '@modern-js/server-runtime';
+
+const shouldProxyRemoteAsset = (pathname: string) => {
+  if (pathname.startsWith('/static/js/async/')) {
+    return (
+      pathname.includes('__federation_expose_') ||
+      pathname.includes('_react-server-components_') ||
+      pathname.includes('node_modules_pnpm_react')
+    );
+  }
+
+  if (pathname.startsWith('/static/css/async/')) {
+    return pathname.includes('__federation_expose_');
+  }
+
+  return false;
+};
+
+const proxyRemoteFederationAsset: MiddlewareHandler = async (c, next) => {
+  const reqUrl = new URL(c.req.url);
+  const pathname = reqUrl.pathname;
+
+  if (!shouldProxyRemoteAsset(pathname)) {
+    await next();
+    return;
+  }
+
+  const remotePort = process.env.RSC_MF_REMOTE_PORT;
+  if (!remotePort) {
+    await next();
+    return;
+  }
+
+  const remoteUrl = `http://127.0.0.1:${remotePort}${pathname}${reqUrl.search}`;
+  const upstream = await fetch(remoteUrl).catch(() => undefined);
+
+  if (!upstream || !upstream.ok) {
+    await next();
+    return;
+  }
+
+  c.res = new Response(await upstream.arrayBuffer(), {
+    status: upstream.status,
+    headers: upstream.headers,
+  });
+};
+
+export default defineServerConfig({
+  middlewares: [
+    {
+      name: 'proxy-remote-federation-asset',
+      handler: proxyRemoteFederationAsset,
+    },
+  ],
+});