Fix client references extraction of CJS exports analysis

packages/next/src/build/webpack/loaders/get-module-build-info.ts

@@ -4,6 +4,26 @@ import type {
 } from '../../analysis/get-page-static-info'
 import { webpack } from 'next/dist/compiled/webpack/webpack'
 
+export function extractCjsExports(source: string) {
+  // In case the client entry is a CJS module, we need to parse all the exports
+  // to make sure that the flight manifest plugin can correctly generate the
+  // manifest.
+  // TODO: Currently SWC wraps CJS exports with `_export(exports, { ... })`,
+  // which is tricky to statically analyze. But since the shape is known, we
+  // use a regex to extract the exports as a workaround. See:
+  // https://github.com/swc-project/swc/blob/5629e6b5291b416c8316587b67b5e83d011a8c22/crates/swc_ecma_transforms_module/src/util.rs#L295
+
+  const matchExportObject = source.match(
+    /(?<=_export\(exports, {)(.*?)(?=}\);)/gs
+  )
+
+  if (matchExportObject) {
+    // Match the property name with format <property>: function() ...
+    return matchExportObject[0].match(/\b\w+(?=:)/g)
+  }
+  return null
+}
+
 /**
  * A getter for module build info that casts to the type it should have.
  * We also expose here types to make easier to use it.

packages/next/src/build/webpack/loaders/next-flight-client-module-loader.ts

@@ -1,5 +1,5 @@
 import { getRSCModuleInformation } from '../../analysis/get-page-static-info'
-import { getModuleBuildInfo } from './get-module-build-info'
+import { getModuleBuildInfo, extractCjsExports } from './get-module-build-info'
 
 export default async function transformSource(
   this: any,
@@ -18,22 +18,8 @@ export default async function transformSource(
   buildInfo.rsc = getRSCModuleInformation(source, false)
 
   if (buildInfo.rsc.isClientRef) {
-    // In case the client entry is a CJS module, we need to parse all the exports
-    // to make sure that the flight manifest plugin can correctly generate the
-    // manifest.
-    // TODO: Currently SWC wraps CJS exports with `_export(exports, { ... })`,
-    // which is tricky to statically analyze. But since the shape is known, we
-    // use a regex to extract the exports as a workaround. See:
-    // https://github.com/swc-project/swc/blob/5629e6b5291b416c8316587b67b5e83d011a8c22/crates/swc_ecma_transforms_module/src/util.rs#L295
-    const matchExportObject = source.match(/\n_export\(exports, {([.\s\S]+)}/m)
-    if (matchExportObject) {
-      const matches: string[] = []
-      const matchExports = matchExportObject[1].matchAll(/([^\s]+):/g)
-      for (const match of matchExports) {
-        matches.push(match[1])
-      }
-      buildInfo.rsc.clientRefs = matches
-    }
+    const exportNames = extractCjsExports(source)
+    if (exportNames) buildInfo.rsc.clientRefs = exportNames
   }
 
   // This is a server action entry module in the client layer. We need to attach

packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts

@@ -340,7 +340,7 @@ export class ClientReferenceManifestPlugin {
         ].filter((name) => name !== null)
 
         moduleExportedKeys.forEach((name) => {
-          const key = resource + '#' + name
+          const key = getClientReferenceModuleKey(resource, name)
 
           // If the chunk is from `app/` chunkGroup, use it first.
           // This make sure not to load the overlapped chunk from `pages/` chunkGroup

test/e2e/app-dir/rsc-basic/rsc-basic.test.ts

@@ -34,6 +34,23 @@ createNextDescribe(
     buildCommand: 'yarn build',
   },
   ({ next, isNextDev, isNextStart }) => {
+    if (isNextDev) {
+      it('should have correct client references keys in manifest', async () => {
+        await next.render('/')
+        // Check that the client-side manifest is correct before any requests
+        const clientReferenceManifest = JSON.parse(
+          await next.readFile('.next/server/client-reference-manifest.json')
+        )
+        const clientModulesNames = Object.keys(
+          clientReferenceManifest.clientModules
+        )
+        clientModulesNames.every((name) => {
+          const [, key] = name.split('#')
+          return key === undefined || key === '' || key === 'default'
+        })
+      })
+    }
+
     it('should correctly render page returning null', async () => {
       const homeHTML = await next.render('/return-null/page')
       const $ = cheerio.load(homeHTML)

test/unit/get-module-build-info.test.ts

@@ -0,0 +1,30 @@
+import { extractCjsExports } from 'next/dist/build/webpack/loaders/get-module-build-info'
+
+describe('extractCjsExports', () => {
+  it('should extract exports', () => {
+    const exportNames = extractCjsExports(`
+  function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name]
+    });
+  }
+  _export(exports, {
+    getServerActionDispatcher: function() {
+        return getServerActionDispatcher;
+    },
+    urlToUrlWithoutFlightMarker: function() {
+        return urlToUrlWithoutFlightMarker;
+    },
+    default: function() {
+        return AppRouter;
+    }
+  });
+  `)
+    expect(exportNames).toEqual([
+      'getServerActionDispatcher',
+      'urlToUrlWithoutFlightMarker',
+      'default',
+    ])
+  })
+})