From 432550a02a2e344afeac975c3f2052707aba7fd6 Mon Sep 17 00:00:00 2001
From: ScriptedAlchemy <zackary.l.jackson@gmail.com>
Date: Tue, 21 Jan 2025 09:35:24 -0800
Subject: [PATCH] feat(nextjs-mf): update module share for rsc

---
 .../app/context/context-click-counter.tsx     |   3 +
 .../[subCategorySlug]/error.tsx               |   2 +-
 .../error-handling/[categorySlug]/error.tsx   |   2 +-
 .../app/error-handling/error.tsx              |   2 +-
 apps/next-app-router-4000/app/layout.tsx      |   4 +-
 apps/next-app-router-4000/ui/buggy-button.tsx |   2 +-
 apps/next-app-router-4001/app/demo/page.tsx   |  47 +++++---
 apps/next-app-router-4001/next.config.js      |   8 +-
 .../src/lib/sharing/ConsumeSharedPlugin.ts    |   5 +-
 .../src/lib/sharing/ProvideSharedPlugin.ts    |   6 +-
 .../configCases/layers/9-layers-full/App.js   |  12 ++
 .../layers/9-layers-full/ComponentA.js        |   5 +
 .../configCases/layers/9-layers-full/index.js |  12 ++
 .../layers/9-layers-full/layerImport.js       |   3 +
 .../9-layers-full/node_modules/react/index.js |   4 +
 .../9-layers-full/node_modules/react/other.js |   1 +
 .../node_modules/react/package.json           |   4 +
 .../layers/9-layers-full/package.json         |  12 ++
 .../layers/9-layers-full/test.config.js       |   6 +
 .../layers/9-layers-full/webpack.config.js    |  87 ++++++++++++++
 packages/nextjs-mf/src/internal.ts            | 109 ++++++++----------
 21 files changed, 246 insertions(+), 90 deletions(-)
 create mode 100644 packages/enhanced/test/configCases/layers/9-layers-full/App.js
 create mode 100644 packages/enhanced/test/configCases/layers/9-layers-full/ComponentA.js
 create mode 100644 packages/enhanced/test/configCases/layers/9-layers-full/index.js
 create mode 100644 packages/enhanced/test/configCases/layers/9-layers-full/layerImport.js
 create mode 100644 packages/enhanced/test/configCases/layers/9-layers-full/node_modules/react/index.js
 create mode 100644 packages/enhanced/test/configCases/layers/9-layers-full/node_modules/react/other.js
 create mode 100644 packages/enhanced/test/configCases/layers/9-layers-full/node_modules/react/package.json
 create mode 100644 packages/enhanced/test/configCases/layers/9-layers-full/package.json
 create mode 100644 packages/enhanced/test/configCases/layers/9-layers-full/test.config.js
 create mode 100644 packages/enhanced/test/configCases/layers/9-layers-full/webpack.config.js

diff --git a/apps/next-app-router-4000/app/context/context-click-counter.tsx b/apps/next-app-router-4000/app/context/context-click-counter.tsx
index 0a36ee3aae..a59be8aeb2 100644
--- a/apps/next-app-router-4000/app/context/context-click-counter.tsx
+++ b/apps/next-app-router-4000/app/context/context-click-counter.tsx
@@ -3,6 +3,8 @@
 import { useCounter } from './counter-context';
 import React from 'react';
 import { Boundary } from '#/ui/boundary';
+import dynamic from 'next/dynamic';
+const Button = dynamic(() => import('remote_4001/Button'), { ssr: true });
 
 const ContextClickCounter = () => {
   const [count, setCount] = useCounter();
@@ -14,6 +16,7 @@ const ContextClickCounter = () => {
       size="small"
       animateRerendering={false}
     >
+      <Button>testing</Button>
       <button
         onClick={() => setCount(count + 1)}
         className="rounded-lg bg-gray-700 px-3 py-1 text-sm font-medium tabular-nums text-gray-100 hover:bg-gray-500 hover:text-white"
diff --git a/apps/next-app-router-4000/app/error-handling/[categorySlug]/[subCategorySlug]/error.tsx b/apps/next-app-router-4000/app/error-handling/[categorySlug]/[subCategorySlug]/error.tsx
index ee8f211cb2..bed2b1c252 100644
--- a/apps/next-app-router-4000/app/error-handling/[categorySlug]/[subCategorySlug]/error.tsx
+++ b/apps/next-app-router-4000/app/error-handling/[categorySlug]/[subCategorySlug]/error.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Boundary } from '#/ui/boundary';
-import Button from '#/ui/button';
+import Button from 'remote_4001/Button';
 import React from 'react';
 
 export default function Error({ error, reset }: any) {
diff --git a/apps/next-app-router-4000/app/error-handling/[categorySlug]/error.tsx b/apps/next-app-router-4000/app/error-handling/[categorySlug]/error.tsx
index 088c06aeb4..a3b35cc805 100644
--- a/apps/next-app-router-4000/app/error-handling/[categorySlug]/error.tsx
+++ b/apps/next-app-router-4000/app/error-handling/[categorySlug]/error.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Boundary } from '#/ui/boundary';
-import Button from '#/ui/button';
+import Button from 'remote_4001/Button';
 import React from 'react';
 
 export default function Error({ error, reset }: any) {
diff --git a/apps/next-app-router-4000/app/error-handling/error.tsx b/apps/next-app-router-4000/app/error-handling/error.tsx
index 24218e4aed..70a7ef16ec 100644
--- a/apps/next-app-router-4000/app/error-handling/error.tsx
+++ b/apps/next-app-router-4000/app/error-handling/error.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Boundary } from '#/ui/boundary';
-import Button from '#/ui/button';
+import Button from 'remote_4001/Button';
 import React from 'react';
 
 export default function Error({ error, reset }: any) {
diff --git a/apps/next-app-router-4000/app/layout.tsx b/apps/next-app-router-4000/app/layout.tsx
index ba6662a2c6..ed79b53661 100644
--- a/apps/next-app-router-4000/app/layout.tsx
+++ b/apps/next-app-router-4000/app/layout.tsx
@@ -1,7 +1,7 @@
 import '#/styles/globals.css';
 import { AddressBar } from '#/ui/address-bar';
 import Byline from '#/ui/byline';
-import { GlobalNav } from '#/ui/global-nav';
+// import { GlobalNav } from 'remote_4001/GlobalNav(rsc)';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
@@ -31,7 +31,7 @@ export default function RootLayout({
   return (
     <html lang="en" className="[color-scheme:dark]">
       <body className="overflow-y-scroll bg-gray-1100 bg-[url('/grid.svg')] pb-36">
-        <GlobalNav />
+        {/*<GlobalNav />*/}
 
         <div className="lg:pl-72">
           <div className="mx-auto max-w-4xl space-y-8 px-2 pt-20 lg:px-8 lg:py-8">
diff --git a/apps/next-app-router-4000/ui/buggy-button.tsx b/apps/next-app-router-4000/ui/buggy-button.tsx
index b2190b2a2f..3a0906605d 100644
--- a/apps/next-app-router-4000/ui/buggy-button.tsx
+++ b/apps/next-app-router-4000/ui/buggy-button.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import Button from '#/ui/button';
+import Button from 'remote_4001/Button';
 import React from 'react';
 
 export default function BuggyButton() {
diff --git a/apps/next-app-router-4001/app/demo/page.tsx b/apps/next-app-router-4001/app/demo/page.tsx
index 9cc6727915..25a589d191 100644
--- a/apps/next-app-router-4001/app/demo/page.tsx
+++ b/apps/next-app-router-4001/app/demo/page.tsx
@@ -6,22 +6,28 @@ import dynamic from 'next/dynamic';
 // Dynamically import remote components
 const Button = dynamic(() => import('remote_4001/Button'), { ssr: true });
 const Header = dynamic(() => import('remote_4001/Header'), { ssr: true });
-const ProductCard = dynamic(() => import('remote_4001/ProductCard'), { ssr: true });
+const ProductCard = dynamic(() => import('remote_4001/ProductCard'), {
+  ssr: true,
+});
 const TabGroup = dynamic(() => import('remote_4001/TabGroup'), { ssr: true });
-const TabNavItem = dynamic(() => import('remote_4001/TabNavItem'), { ssr: true });
+const TabNavItem = dynamic(() => import('remote_4001/TabNavItem'), {
+  ssr: true,
+});
 const CountUp = dynamic(() => import('remote_4001/CountUp'), { ssr: true });
-const RenderingInfo = dynamic(() => import('remote_4001/RenderingInfo'), { ssr: true });
+const RenderingInfo = dynamic(() => import('remote_4001/RenderingInfo'), {
+  ssr: true,
+});
 
 export default function DemoPage() {
   return (
     <div className="p-4">
       <Header />
 
-      <main className="max-w-4xl mx-auto mt-8">
-        <h1 className="text-2xl font-bold mb-6">Remote Components Demo</h1>
+      <main className="mx-auto mt-8 max-w-4xl">
+        <h1 className="mb-6 text-2xl font-bold">Remote Components Demo</h1>
 
         <section className="mb-8">
-          <h2 className="text-xl font-semibold mb-4">Basic UI Components</h2>
+          <h2 className="mb-4 text-xl font-semibold">Basic UI Components</h2>
           <div className="space-x-4">
             <Button>Primary Button</Button>
             <Button>Secondary Button</Button>
@@ -29,22 +35,29 @@ export default function DemoPage() {
         </section>
 
         <section className="mb-8">
-          <h2 className="text-xl font-semibold mb-4">Navigation Components</h2>
+          <h2 className="mb-4 text-xl font-semibold">Navigation Components</h2>
           <TabGroup>
-            <TabNavItem href="/demo/tab1" isActive={true}>Tab 1</TabNavItem>
-            <TabNavItem href="/demo/tab2" isActive={false}>Tab 2</TabNavItem>
-            <TabNavItem href="/demo/tab3" isActive={false}>Tab 3</TabNavItem>
+            <TabNavItem href="/demo/tab1" isActive={true}>
+              Tab 1
+            </TabNavItem>
+            <TabNavItem href="/demo/tab2" isActive={false}>
+              Tab 2
+            </TabNavItem>
+            <TabNavItem href="/demo/tab3" isActive={false}>
+              Tab 3
+            </TabNavItem>
           </TabGroup>
         </section>
 
         <section className="mb-8">
-          <h2 className="text-xl font-semibold mb-4">Product Components</h2>
+          <h2 className="mb-4 text-xl font-semibold">Product Components</h2>
           <div className="grid grid-cols-2 gap-4">
             <ProductCard
               product={{
                 name: 'Demo Product',
                 price: 99.99,
-                description: 'This is a demo product to showcase the ProductCard component',
+                description:
+                  'This is a demo product to showcase the ProductCard component',
                 image: 'https://via.placeholder.com/300',
                 rating: 4.5,
               }}
@@ -62,14 +75,14 @@ export default function DemoPage() {
         </section>
 
         <section className="mb-8">
-          <h2 className="text-xl font-semibold mb-4">Interactive Components</h2>
+          <h2 className="mb-4 text-xl font-semibold">Interactive Components</h2>
           <div className="space-y-4">
-            <div className="p-4 border rounded">
-              <h3 className="font-medium mb-2">Count Up Animation</h3>
+            <div className="rounded border p-4">
+              <h3 className="mb-2 font-medium">Count Up Animation</h3>
               <CountUp start={0} end={1000} />
             </div>
-            <div className="p-4 border rounded">
-              <h3 className="font-medium mb-2">Rendering Information</h3>
+            <div className="rounded border p-4">
+              <h3 className="mb-2 font-medium">Rendering Information</h3>
               <RenderingInfo />
             </div>
           </div>
diff --git a/apps/next-app-router-4001/next.config.js b/apps/next-app-router-4001/next.config.js
index dafe9d8ca2..714745c649 100644
--- a/apps/next-app-router-4001/next.config.js
+++ b/apps/next-app-router-4001/next.config.js
@@ -22,9 +22,11 @@ const nextConfig = {
         exposes: {
           // Core UI Components
           './Button': './ui/button',
-          // './Header': './ui/header',
-          // './Footer': './ui/footer',
-          // './GlobalNav': './ui/global-nav',
+          // './Header': isServer ? './ui/header?rsc' : './ui/header?shared',
+          './Footer': './ui/footer',
+          // './GlobalNav(rsc)': isServer ? './ui/global-nav?rsc' : './ui/global-nav',
+          // './GlobalNav(ssr)': isServer ? './ui/global-nav?ssr' : './ui/global-nav',
+          './GlobalNav': './ui/global-nav',
           //
           // // Product Related Components
           // './ProductCard': './ui/product-card',
diff --git a/packages/enhanced/src/lib/sharing/ConsumeSharedPlugin.ts b/packages/enhanced/src/lib/sharing/ConsumeSharedPlugin.ts
index e9badacf8a..1ae93165b8 100644
--- a/packages/enhanced/src/lib/sharing/ConsumeSharedPlugin.ts
+++ b/packages/enhanced/src/lib/sharing/ConsumeSharedPlugin.ts
@@ -334,8 +334,9 @@ class ConsumeSharedPlugin {
                 return createConsumeSharedModule(context, request, match);
               }
               for (const [prefix, options] of prefixedConsumes) {
-                if (request.startsWith(prefix)) {
-                  const remainder = request.slice(prefix.length);
+                const lookup = options.request || prefix;
+                if (request.startsWith(lookup)) {
+                  const remainder = request.slice(lookup.length);
                   return createConsumeSharedModule(context, request, {
                     ...options,
                     import: options.import
diff --git a/packages/enhanced/src/lib/sharing/ProvideSharedPlugin.ts b/packages/enhanced/src/lib/sharing/ProvideSharedPlugin.ts
index 585b6faeb4..a814c6d8cd 100644
--- a/packages/enhanced/src/lib/sharing/ProvideSharedPlugin.ts
+++ b/packages/enhanced/src/lib/sharing/ProvideSharedPlugin.ts
@@ -229,8 +229,10 @@ class ProvideSharedPlugin {
               }
             }
             for (const [prefix, config] of prefixMatchProvides) {
-              if (request.startsWith(prefix) && resource) {
-                const remainder = request.slice(prefix.length);
+              const lookup = config.request || prefix;
+              if (request.startsWith(lookup) && resource) {
+                const remainder = request.slice(lookup.length);
+                debugger;
                 provideSharedModule(
                   resource,
                   {
diff --git a/packages/enhanced/test/configCases/layers/9-layers-full/App.js b/packages/enhanced/test/configCases/layers/9-layers-full/App.js
new file mode 100644
index 0000000000..a1ffa9b896
--- /dev/null
+++ b/packages/enhanced/test/configCases/layers/9-layers-full/App.js
@@ -0,0 +1,12 @@
+import React, { layeredComponentsReact } from 'react';
+import other from 'react/other';
+import ComponentA from 'containerA/ComponentA';
+import RemoteApp from 'containerA/App';
+import LocalComponentA from './ComponentA';
+console.log(other);
+export default function App() {
+  return `App (no layer) rendered with React version: [${React()}] with non-layered React value: [${layeredComponentsReact()}]
+Local Component: ${LocalComponentA()}
+Remote Component from container7: ${ComponentA()}
+Remote App from container7: ${RemoteApp()}`;
+}
diff --git a/packages/enhanced/test/configCases/layers/9-layers-full/ComponentA.js b/packages/enhanced/test/configCases/layers/9-layers-full/ComponentA.js
new file mode 100644
index 0000000000..6e1accf7b1
--- /dev/null
+++ b/packages/enhanced/test/configCases/layers/9-layers-full/ComponentA.js
@@ -0,0 +1,5 @@
+import React, { layeredComponentsReact } from 'react';
+
+export default function ComponentA() {
+  return `LocalComponentA (in react-layer) rendered with React version: [${React()}], layered React value: [${layeredComponentsReact()}]`;
+}
diff --git a/packages/enhanced/test/configCases/layers/9-layers-full/index.js b/packages/enhanced/test/configCases/layers/9-layers-full/index.js
new file mode 100644
index 0000000000..cb947d335b
--- /dev/null
+++ b/packages/enhanced/test/configCases/layers/9-layers-full/index.js
@@ -0,0 +1,12 @@
+it('should load App with React and both types of remote components', () => {
+  return import('containerA/noop').then((m) => {
+    return import('./App').then(({ default: App }) => {
+      const rendered = App();
+      expect(rendered)
+        .toBe(`App (no layer) rendered with React version: [This is react 0.1.2] with non-layered React value: [No Layer]
+Local Component: LocalComponentA (in react-layer) rendered with React version: [This is react 0.1.2], layered React value: [react-layer]
+Remote Component from container7: ComponentA (in react-layer) rendered with React version: [This is react 0.1.2] with layered React value: [react-layer]
+Remote App from container7: App (no layer) rendered with React version: [This is react 0.1.2] with non-layered React value: [No Layer] and imported: ComponentA (in react-layer) rendered with React version: [This is react 0.1.2] with layered React value: [react-layer]`);
+    });
+  });
+});
diff --git a/packages/enhanced/test/configCases/layers/9-layers-full/layerImport.js b/packages/enhanced/test/configCases/layers/9-layers-full/layerImport.js
new file mode 100644
index 0000000000..361f3ac025
--- /dev/null
+++ b/packages/enhanced/test/configCases/layers/9-layers-full/layerImport.js
@@ -0,0 +1,3 @@
+import LocalComponentA from './ComponentA';
+
+export default LocalComponentA;
diff --git a/packages/enhanced/test/configCases/layers/9-layers-full/node_modules/react/index.js b/packages/enhanced/test/configCases/layers/9-layers-full/node_modules/react/index.js
new file mode 100644
index 0000000000..17f75306c1
--- /dev/null
+++ b/packages/enhanced/test/configCases/layers/9-layers-full/node_modules/react/index.js
@@ -0,0 +1,4 @@
+let version = "2.1.0";
+export function setVersion(v) { version = v; }
+export const layeredComponentsReact = () => "FEDERATION IS BROKEN, THIS VERION SHOULD NOT BE LOADED";
+export default () => `${version}`;
diff --git a/packages/enhanced/test/configCases/layers/9-layers-full/node_modules/react/other.js b/packages/enhanced/test/configCases/layers/9-layers-full/node_modules/react/other.js
new file mode 100644
index 0000000000..45c70286f8
--- /dev/null
+++ b/packages/enhanced/test/configCases/layers/9-layers-full/node_modules/react/other.js
@@ -0,0 +1 @@
+export default 'other';
diff --git a/packages/enhanced/test/configCases/layers/9-layers-full/node_modules/react/package.json b/packages/enhanced/test/configCases/layers/9-layers-full/node_modules/react/package.json
new file mode 100644
index 0000000000..8a05e35aa0
--- /dev/null
+++ b/packages/enhanced/test/configCases/layers/9-layers-full/node_modules/react/package.json
@@ -0,0 +1,4 @@
+{
+  "version": "2.1.0",
+  "name": "react"
+}
diff --git a/packages/enhanced/test/configCases/layers/9-layers-full/package.json b/packages/enhanced/test/configCases/layers/9-layers-full/package.json
new file mode 100644
index 0000000000..9db5aa360a
--- /dev/null
+++ b/packages/enhanced/test/configCases/layers/9-layers-full/package.json
@@ -0,0 +1,12 @@
+{
+  "private": true,
+  "engines": {
+    "node": ">=10.13.0"
+  },
+  "scripts": {
+    "build": "webpack --config=webpack.config.js"
+  },
+  "dependencies": {
+    "react": "*"
+  }
+}
diff --git a/packages/enhanced/test/configCases/layers/9-layers-full/test.config.js b/packages/enhanced/test/configCases/layers/9-layers-full/test.config.js
new file mode 100644
index 0000000000..1ca0b7cf73
--- /dev/null
+++ b/packages/enhanced/test/configCases/layers/9-layers-full/test.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  findBundle: function (i, options) {
+    return './main.js';
+    return i === 0 ? './main.js' : './module/main.mjs';
+  },
+};
diff --git a/packages/enhanced/test/configCases/layers/9-layers-full/webpack.config.js b/packages/enhanced/test/configCases/layers/9-layers-full/webpack.config.js
new file mode 100644
index 0000000000..4558634414
--- /dev/null
+++ b/packages/enhanced/test/configCases/layers/9-layers-full/webpack.config.js
@@ -0,0 +1,87 @@
+const { ModuleFederationPlugin } = require('../../../../dist/src');
+
+const common = {
+  name: 'container_8',
+  filename: 'container.js',
+  remotes: {
+    containerA: {
+      external: '../7-layers-full/container.js',
+    },
+  },
+  shared: {
+    react: {
+      singleton: true,
+      requiredVersion: false,
+    },
+    randomvalue: {
+      request: 'react/',
+      shareKey: 'react',
+      singleton: true,
+      requiredVersion: false,
+      layer: 'react-layer',
+      issuerLayer: 'react-layer',
+    },
+  },
+};
+
+const commonConfig = {
+  entry: './index.js',
+  mode: 'development',
+  devtool: false,
+  experiments: {
+    layers: true,
+  },
+  module: {
+    rules: [
+      {
+        layer: 'react-layer',
+        test: /ComponentA\.js$/,
+      },
+      {
+        test: /react\.js$/,
+        issuerLayer: 'react-layer',
+        layer: 'react-layer',
+      },
+    ],
+  },
+};
+
+module.exports = [
+  {
+    ...commonConfig,
+    output: {
+      filename: '[name].js',
+      uniqueName: '8-layers-full',
+    },
+    plugins: [
+      new ModuleFederationPlugin({
+        ...common,
+        library: { type: 'commonjs-module' },
+      }),
+    ],
+  },
+  {
+    ...commonConfig,
+    experiments: {
+      ...commonConfig.experiments,
+      outputModule: true,
+    },
+    output: {
+      filename: 'module/[name].mjs',
+      uniqueName: '8-layers-full-mjs',
+    },
+    plugins: [
+      new ModuleFederationPlugin({
+        ...common,
+        library: { type: 'module' },
+        filename: 'module/container.mjs',
+        remotes: {
+          containerA: {
+            external: '../../7-layers-full/module/container.mjs',
+          },
+        },
+      }),
+    ],
+    target: 'node14',
+  },
+];
diff --git a/packages/nextjs-mf/src/internal.ts b/packages/nextjs-mf/src/internal.ts
index 52a39ff1a2..84b585c604 100644
--- a/packages/nextjs-mf/src/internal.ts
+++ b/packages/nextjs-mf/src/internal.ts
@@ -48,66 +48,54 @@ const WEBPACK_LAYERS_NAMES = {
   appPagesBrowser: 'app-pages-browser',
 } as const;
 
-const reactShares = [
-  WEBPACK_LAYERS_NAMES.reactServerComponents,
-  WEBPACK_LAYERS_NAMES.serverSideRendering,
-  undefined,
-].reduce(
-  (acc, layer) => {
-    const key = layer ? `react-${layer}` : 'react';
-    acc[key] = {
-      singleton: true,
-      requiredVersion: false,
-      import: layer ? undefined : false,
-      shareKey: 'react',
-      request: 'react',
-      layer,
-      issuerLayer: layer,
-    };
-    return acc;
-  },
-  {} as Record<string, ExtendedSharedConfig>,
-);
+const createSharedConfig = (
+  name: string,
+  layers: (string | undefined)[],
+  options: { request?: string; import?: false | undefined } = {},
+) => {
+  return layers.reduce(
+    (acc, layer) => {
+      const key = layer ? `${name}-${layer}` : name;
+      acc[key] = {
+        singleton: true,
+        requiredVersion: false,
+        import: layer ? undefined : (options.import ?? false),
+        shareKey: options.request ?? name,
+        request: options.request ?? name,
+        layer,
+        issuerLayer: layer,
+      };
+      return acc;
+    },
+    {} as Record<string, ExtendedSharedConfig>,
+  );
+};
 
-const reactDomShares = [
+const defaultLayers = [
   WEBPACK_LAYERS_NAMES.reactServerComponents,
   WEBPACK_LAYERS_NAMES.serverSideRendering,
   undefined,
-].reduce(
-  (acc, layer) => {
-    const key = layer ? `react-${layer}` : 'react';
-    acc[key] = {
-      singleton: true,
-      requiredVersion: false,
-      import: layer ? undefined : false,
-      shareKey: 'react-dom',
-      request: 'react-dom',
-      layer,
-      issuerLayer: layer,
-    };
-    return acc;
-  },
-  {} as Record<string, ExtendedSharedConfig>,
-);
+];
 
-const nextNavigationShares = [
+const navigationLayers = [
   WEBPACK_LAYERS_NAMES.reactServerComponents,
   WEBPACK_LAYERS_NAMES.serverSideRendering,
-].reduce(
-  (acc, layer) => {
-    const key = layer ? `next-navigation-${layer}` : 'next-navigation';
-    acc[key] = {
-      singleton: true,
-      requiredVersion: false,
-      shareKey: 'next/navigation',
-      request: 'next/navigation',
-      layer,
-      issuerLayer: layer,
-    };
-    return acc;
-  },
-  {} as Record<string, ExtendedSharedConfig>,
+];
+
+const reactShares = createSharedConfig('react', defaultLayers);
+const reactDomShares = createSharedConfig('react', defaultLayers, {
+  request: 'react-dom',
+});
+const jsxRuntimeShares = createSharedConfig('react/', navigationLayers, {
+  request: 'react/',
+  import: undefined,
+});
+const nextNavigationShares = createSharedConfig(
+  'next-navigation',
+  navigationLayers,
+  { request: 'next/navigation' },
 );
+
 /**
  * @typedef SharedObject
  * @type {object}
@@ -123,6 +111,7 @@ export const DEFAULT_SHARE_SCOPE: sharePlugin.SharedObject = {
   ...reactShares,
   ...reactDomShares,
   ...nextNavigationShares,
+  ...jsxRuntimeShares,
   'next/dynamic': {
     requiredVersion: undefined,
     singleton: true,
@@ -173,14 +162,14 @@ export const DEFAULT_SHARE_SCOPE: sharePlugin.SharedObject = {
   //   requiredVersion: false,
   //   import: false,
   // },
-  // 'react/jsx-dev-runtime': {
-  //   singleton: true,
-  //   requiredVersion: false,
-  // },
-  // 'react/jsx-runtime': {
-  //   singleton: true,
-  //   requiredVersion: false,
-  // },
+  'react/jsx-dev-runtime': {
+    singleton: true,
+    requiredVersion: false,
+  },
+  'react/jsx-runtime': {
+    singleton: true,
+    requiredVersion: false,
+  },
   'styled-jsx': {
     singleton: true,
     import: undefined,