test(rsc-mf): combine react-server conditions with layered shared paths

Author: cursoragent

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

@@ -25,6 +25,7 @@ export default defineConfig({
         chain.target('async-node');
         chain.resolve.conditionNames
           .clear()
+          .add('react-server')
           .add('require')
           .add('import')
           .add('default');

tests/integration/rsc-mf/host/module-federation.config.ts

@@ -1,16 +1,84 @@
+import path from 'path';
 import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 
 const REMOTE_PORT = process.env.RSC_MF_REMOTE_PORT || '3008';
+const LAYERS = {
+  ssr: 'server-side-rendering',
+  rsc: 'react-server-components',
+} as const;
+
+const reactClientPath = require.resolve('react');
+const reactDomClientPath = require.resolve('react-dom');
+const reactServerPath = path.join(
+  path.dirname(require.resolve('react/package.json')),
+  'react.react-server.js',
+);
+
+const layeredShared = [
+  {
+    react: {
+      import: reactClientPath,
+      shareKey: 'react',
+      singleton: true,
+      requiredVersion: false,
+      shareScope: 'default',
+    },
+    'react-dom': {
+      import: reactDomClientPath,
+      shareKey: 'react-dom',
+      singleton: true,
+      requiredVersion: false,
+      shareScope: 'default',
+    },
+  },
+  {
+    react: {
+      import: reactClientPath,
+      shareKey: 'react',
+      singleton: true,
+      requiredVersion: false,
+      shareScope: 'ssr',
+      layer: LAYERS.ssr,
+      issuerLayer: LAYERS.ssr,
+    },
+    'react-dom': {
+      import: reactDomClientPath,
+      shareKey: 'react-dom',
+      singleton: true,
+      requiredVersion: false,
+      shareScope: 'ssr',
+      layer: LAYERS.ssr,
+      issuerLayer: LAYERS.ssr,
+    },
+  },
+  {
+    react: {
+      import: reactServerPath,
+      shareKey: 'react',
+      singleton: true,
+      requiredVersion: false,
+      shareScope: 'rsc',
+      layer: LAYERS.rsc,
+      issuerLayer: LAYERS.rsc,
+    },
+    'react-dom': {
+      import: reactDomClientPath,
+      shareKey: 'react-dom',
+      singleton: true,
+      requiredVersion: false,
+      shareScope: 'rsc',
+      layer: LAYERS.rsc,
+      issuerLayer: LAYERS.rsc,
+    },
+  },
+] as const;
 
 export default createModuleFederationConfig({
   name: 'rscHost',
   remotes: {
     rscRemote: `rscRemote@http://127.0.0.1:${REMOTE_PORT}/static/mf-manifest.json`,
   },
-  shared: {
-    react: { singleton: true },
-    'react-dom': { singleton: true },
-  },
+  shared: layeredShared as any,
   dts: false,
   experiments: {
     asyncStartup: true,

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

@@ -30,6 +30,7 @@ export default defineConfig({
         chain.target('async-node');
         chain.resolve.conditionNames
           .clear()
+          .add('react-server')
           .add('require')
           .add('import')
           .add('default');

tests/integration/rsc-mf/remote/module-federation.config.ts

@@ -1,10 +1,77 @@
+import path from 'path';
 import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 
 const LAYERS = {
   ssr: 'server-side-rendering',
   rsc: 'react-server-components',
 } as const;
 
+const reactClientPath = require.resolve('react');
+const reactDomClientPath = require.resolve('react-dom');
+const reactServerPath = path.join(
+  path.dirname(require.resolve('react/package.json')),
+  'react.react-server.js',
+);
+
+const layeredShared = [
+  {
+    react: {
+      import: reactClientPath,
+      shareKey: 'react',
+      singleton: true,
+      requiredVersion: false,
+      shareScope: 'default',
+    },
+    'react-dom': {
+      import: reactDomClientPath,
+      shareKey: 'react-dom',
+      singleton: true,
+      requiredVersion: false,
+      shareScope: 'default',
+    },
+  },
+  {
+    react: {
+      import: reactClientPath,
+      shareKey: 'react',
+      singleton: true,
+      requiredVersion: false,
+      shareScope: 'ssr',
+      layer: LAYERS.ssr,
+      issuerLayer: LAYERS.ssr,
+    },
+    'react-dom': {
+      import: reactDomClientPath,
+      shareKey: 'react-dom',
+      singleton: true,
+      requiredVersion: false,
+      shareScope: 'ssr',
+      layer: LAYERS.ssr,
+      issuerLayer: LAYERS.ssr,
+    },
+  },
+  {
+    react: {
+      import: reactServerPath,
+      shareKey: 'react',
+      singleton: true,
+      requiredVersion: false,
+      shareScope: 'rsc',
+      layer: LAYERS.rsc,
+      issuerLayer: LAYERS.rsc,
+    },
+    'react-dom': {
+      import: reactDomClientPath,
+      shareKey: 'react-dom',
+      singleton: true,
+      requiredVersion: false,
+      shareScope: 'rsc',
+      layer: LAYERS.rsc,
+      issuerLayer: LAYERS.rsc,
+    },
+  },
+] as const;
+
 export default createModuleFederationConfig({
   name: 'rscRemote',
   manifest: {
@@ -61,10 +128,7 @@ export default createModuleFederationConfig({
       layer: LAYERS.rsc,
     } as any,
   },
-  shared: {
-    react: { singleton: true },
-    'react-dom': { singleton: true },
-  },
+  shared: layeredShared as any,
   dts: false,
   experiments: {
     asyncStartup: true,