[Flight] Fallback to importing the whole module instead of encoding every name

packages/react-server-dom-webpack/src/ReactFlightClientConfigNodeBundler.js

@@ -39,8 +39,29 @@ export function resolveClientReference<T>(
   bundlerConfig: SSRManifest,
   metadata: ClientReferenceMetadata,
 ): ClientReference<T> {
-  const resolvedModuleData = bundlerConfig[metadata.id][metadata.name];
-  return resolvedModuleData;
+  const moduleExports = bundlerConfig[metadata.id];
+  let resolvedModuleData = moduleExports[metadata.name];
+  let name;
+  if (resolvedModuleData) {
+    // The potentially aliased name.
+    name = resolvedModuleData.name;
+  } else {
+    // If we don't have this specific name, we might have the full module.
+    resolvedModuleData = moduleExports['*'];
+    if (!resolvedModuleData) {
+      throw new Error(
+        'Could not find the module "' +
+          metadata.id +
+          '" in the React SSR Manifest. ' +
+          'This is probably a bug in the React Server Components bundler.',
+      );
+    }
+    name = metadata.name;
+  }
+  return {
+    specifier: resolvedModuleData.specifier,
+    name: name,
+  };
 }
 
 export function resolveServerReference<T>(

packages/react-server-dom-webpack/src/ReactFlightClientConfigWebpackBundler.js

@@ -40,17 +40,31 @@ export function resolveClientReference<T>(
   metadata: ClientReferenceMetadata,
 ): ClientReference<T> {
   if (bundlerConfig) {
-    const resolvedModuleData = bundlerConfig[metadata.id][metadata.name];
-    if (metadata.async) {
-      return {
-        id: resolvedModuleData.id,
-        chunks: resolvedModuleData.chunks,
-        name: resolvedModuleData.name,
-        async: true,
-      };
+    const moduleExports = bundlerConfig[metadata.id];
+    let resolvedModuleData = moduleExports[metadata.name];
+    let name;
+    if (resolvedModuleData) {
+      // The potentially aliased name.
+      name = resolvedModuleData.name;
     } else {
-      return resolvedModuleData;
+      // If we don't have this specific name, we might have the full module.
+      resolvedModuleData = moduleExports['*'];
+      if (!resolvedModuleData) {
+        throw new Error(
+          'Could not find the module "' +
+            metadata.id +
+            '" in the React SSR Manifest. ' +
+            'This is probably a bug in the React Server Components bundler.',
+        );
+      }
+      name = metadata.name;
     }
+    return {
+      id: resolvedModuleData.id,
+      chunks: resolvedModuleData.chunks,
+      name: name,
+      async: !!metadata.async,
+    };
   }
   return metadata;
 }
@@ -59,8 +73,37 @@ export function resolveServerReference<T>(
   bundlerConfig: ServerManifest,
   id: ServerReferenceId,
 ): ClientReference<T> {
-  // This needs to return async: true if it's an async module.
-  return bundlerConfig[id];
+  let name = '';
+  let resolvedModuleData = bundlerConfig[id];
+  if (resolvedModuleData) {
+    // The potentially aliased name.
+    name = resolvedModuleData.name;
+  } else {
+    // We didn't find this specific export name but we might have the * export
+    // which contains this name as well.
+    // TODO: It's unfortunate that we now have to parse this string. We should
+    // probably go back to encoding path and name separately on the client reference.
+    const idx = id.lastIndexOf('#');
+    if (idx !== -1) {
+      name = id.substr(idx + 1);
+      resolvedModuleData = bundlerConfig[id.substr(0, idx)];
+    }
+    if (!resolvedModuleData) {
+      throw new Error(
+        'Could not find the module "' +
+          id +
+          '" in the React Server Manifest. ' +
+          'This is probably a bug in the React Server Components bundler.',
+      );
+    }
+  }
+  // TODO: This needs to return async: true if it's an async module.
+  return {
+    id: resolvedModuleData.id,
+    chunks: resolvedModuleData.chunks,
+    name: name,
+    async: false,
+  };
 }
 
 // The chunk cache contains all the chunks we've preloaded so far.

packages/react-server-dom-webpack/src/ReactFlightServerConfigWebpackBundler.js

@@ -58,17 +58,37 @@ export function resolveClientReferenceMetadata<T>(
   config: ClientManifest,
   clientReference: ClientReference<T>,
 ): ClientReferenceMetadata {
-  const resolvedModuleData = config[clientReference.$$id];
-  if (clientReference.$$async) {
-    return {
-      id: resolvedModuleData.id,
-      chunks: resolvedModuleData.chunks,
-      name: resolvedModuleData.name,
-      async: true,
-    };
+  const modulePath = clientReference.$$id;
+  let name = '';
+  let resolvedModuleData = config[modulePath];
+  if (resolvedModuleData) {
+    // The potentially aliased name.
+    name = resolvedModuleData.name;
   } else {
-    return resolvedModuleData;
+    // We didn't find this specific export name but we might have the * export
+    // which contains this name as well.
+    // TODO: It's unfortunate that we now have to parse this string. We should
+    // probably go back to encoding path and name separately on the client reference.
+    const idx = modulePath.lastIndexOf('#');
+    if (idx !== -1) {
+      name = modulePath.substr(idx + 1);
+      resolvedModuleData = config[modulePath.substr(0, idx)];
+    }
+    if (!resolvedModuleData) {
+      throw new Error(
+        'Could not find the module "' +
+          modulePath +
+          '" in the React Client Manifest. ' +
+          'This is probably a bug in the React Server Components bundler.',
+      );
+    }
   }
+  return {
+    id: resolvedModuleData.id,
+    chunks: resolvedModuleData.chunks,
+    name: name,
+    async: !!clientReference.$$async,
+  };
 }
 
 export function getServerReferenceId<T>(

packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js

@@ -247,10 +247,6 @@ export default class ReactFlightWebpackPlugin {
                 return;
               }
 
-              const moduleProvidedExports = compilation.moduleGraph
-                .getExportsInfo(module)
-                .getProvidedExports();
-
               const href = pathToFileURL(module.resource).href;
 
               if (href !== undefined) {
@@ -267,6 +263,13 @@ export default class ReactFlightWebpackPlugin {
                   specifier: href,
                   name: '*',
                 };
+
+                // TODO: If this module ends up split into multiple modules, then
+                // we should encode each the chunks needed for the specific export.
+                // When the module isn't split, it doesn't matter and we can just
+                // encode the id of the whole module. This code doesn't currently
+                // deal with module splitting so is likely broken from ESM anyway.
+                /*
                 clientManifest[href + '#'] = {
                   id,
                   chunks: chunkIds,
@@ -277,6 +280,10 @@ export default class ReactFlightWebpackPlugin {
                   name: '',
                 };
 
+                const moduleProvidedExports = compilation.moduleGraph
+                  .getExportsInfo(module)
+                  .getProvidedExports();
+
                 if (Array.isArray(moduleProvidedExports)) {
                   moduleProvidedExports.forEach(function (name) {
                     clientManifest[href + '#' + name] = {
@@ -290,6 +297,7 @@ export default class ReactFlightWebpackPlugin {
                     };
                   });
                 }
+                */
 
                 ssrManifest[id] = ssrExports;
               }

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js

@@ -334,6 +334,45 @@ describe('ReactFlightDOM', () => {
     expect(container.innerHTML).toBe('<p>Hello World</p>');
   });
 
+  // @gate enableUseHook
+  it('should be able to render a module split named component export', async () => {
+    const Module = {
+      // This gets split into a separate module from the original one.
+      split: function ({greeting}) {
+        return greeting + ' World';
+      },
+    };
+
+    function Print({response}) {
+      return <p>{use(response)}</p>;
+    }
+
+    function App({response}) {
+      return (
+        <Suspense fallback={<h1>Loading...</h1>}>
+          <Print response={response} />
+        </Suspense>
+      );
+    }
+
+    const {split: Component} = clientExports(Module);
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = ReactServerDOMServer.renderToPipeableStream(
+      <Component greeting={'Hello'} />,
+      webpackMap,
+    );
+    pipe(writable);
+    const response = ReactServerDOMClient.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App response={response} />);
+    });
+    expect(container.innerHTML).toBe('<p>Hello World</p>');
+  });
+
   // @gate enableUseHook
   it('should unwrap async module references', async () => {
     const AsyncModule = Promise.resolve(function AsyncModule({text}) {

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js

@@ -75,12 +75,35 @@ describe('ReactFlightDOMBrowser', () => {
   }
 
   function requireServerRef(ref) {
-    const metaData = webpackServerMap[ref];
-    const mod = __webpack_require__(metaData.id);
-    if (metaData.name === '*') {
+    let name = '';
+    let resolvedModuleData = webpackServerMap[ref];
+    if (resolvedModuleData) {
+      // The potentially aliased name.
+      name = resolvedModuleData.name;
+    } else {
+      // We didn't find this specific export name but we might have the * export
+      // which contains this name as well.
+      // TODO: It's unfortunate that we now have to parse this string. We should
+      // probably go back to encoding path and name separately on the client reference.
+      const idx = ref.lastIndexOf('#');
+      if (idx !== -1) {
+        name = ref.substr(idx + 1);
+        resolvedModuleData = webpackServerMap[ref.substr(0, idx)];
+      }
+      if (!resolvedModuleData) {
+        throw new Error(
+          'Could not find the module "' +
+            ref +
+            '" in the React Client Manifest. ' +
+            'This is probably a bug in the React Server Components bundler.',
+        );
+      }
+    }
+    const mod = __webpack_require__(resolvedModuleData.id);
+    if (name === '*') {
       return mod;
     }
-    return mod[metaData.name];
+    return mod[name];
   }
 
   async function callServer(actionId, body) {
@@ -824,6 +847,52 @@ describe('ReactFlightDOMBrowser', () => {
     expect(result).toBe('Hello HI');
   });
 
+  it('can call a module split server function', async () => {
+    let actionProxy;
+
+    function Client({action}) {
+      actionProxy = action;
+      return 'Click Me';
+    }
+
+    function greet(text) {
+      return 'Hello ' + text;
+    }
+
+    const ServerModule = serverExports({
+      // This gets split into another module
+      split: greet,
+    });
+    const ClientRef = clientExports(Client);
+
+    const stream = ReactServerDOMServer.renderToReadableStream(
+      <ClientRef action={ServerModule.split} />,
+      webpackMap,
+    );
+
+    const response = ReactServerDOMClient.createFromReadableStream(stream, {
+      async callServer(ref, args) {
+        const body = await ReactServerDOMClient.encodeReply(args);
+        return callServer(ref, body);
+      },
+    });
+
+    function App() {
+      return use(response);
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+    expect(container.innerHTML).toBe('Click Me');
+    expect(typeof actionProxy).toBe('function');
+
+    const result = await actionProxy('Split');
+    expect(result).toBe('Hello Split');
+  });
+
   it('can bind arguments to a server reference', async () => {
     let actionProxy;