Fix cjs client components tree-shaking (#64558)

## What

Determine if the client module is a CJS file and `default` export is
imported, then we include the whole module instead of using webpack
magic comments to only extract `default` export.

## Why

Unlike ESM, The `default` export of CJS module is not just `.default`
property, we need to include `__esModule` mark along with `default`
export to make it function properly with React client module proxy


Fixes #64518
Closes NEXT-3119

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

@@ -41,6 +41,7 @@ import { normalizePathSep } from '../../../shared/lib/page-path/normalize-path-s
 import { getProxiedPluginState } from '../../build-context'
 import { PAGE_TYPES } from '../../../lib/page-types'
 import { isWebpackServerOnlyLayer } from '../../utils'
+import { getModuleBuildInfo } from '../loaders/get-module-build-info'
 
 interface Options {
   dev: boolean
@@ -664,7 +665,16 @@ export class FlightClientEntryPlugin {
       if (!modRequest) return
       if (visited.has(modRequest)) {
         if (clientComponentImports[modRequest]) {
+          const isCjsModule =
+            getModuleBuildInfo(mod).rsc?.clientEntryType === 'cjs'
           for (const name of importedIdentifiers) {
+            // For cjs module default import, we include the whole module since
+            const isCjsDefaultImport = isCjsModule && name === 'default'
+            // Always include __esModule along with cjs module default export,
+            // to make sure it work with client module proxy from React.
+            if (isCjsDefaultImport) {
+              clientComponentImports[modRequest].add('__esModule')
+            }
             clientComponentImports[modRequest].add(name)
           }
         }

test/production/app-dir/client-components-tree-shaking/app/cjs-dep/page.js

@@ -0,0 +1,5 @@
+import CjsClientDefault from 'cjs-client-module'
+
+export default function Page() {
+  return <CjsClientDefault />
+}

test/production/app-dir/client-components-tree-shaking/index.test.ts

@@ -70,5 +70,32 @@ createNextDescribe(
         )
       ).toBe(false)
     })
+
+    it('should only include the imported identifier of CJS module in browser bundle', async () => {
+      const clientChunksDir = join(
+        next.testDir,
+        '.next',
+        'static',
+        'chunks',
+        'app',
+        'cjs-dep'
+      )
+
+      const chunkContents = fs
+        .readdirSync(clientChunksDir, {
+          withFileTypes: true,
+        })
+        .filter((dirent) => dirent.isFile())
+        .map((chunkDirent) =>
+          fs.readFileSync(join(chunkDirent.path, chunkDirent.name), 'utf8')
+        )
+
+      expect(
+        chunkContents.some((content) => content.includes('cjs-client:default'))
+      ).toBe(true)
+      expect(
+        chunkContents.every((content) => content.includes('cjs-client:foo'))
+      ).toBe(false)
+    })
   }
 )

test/turbopack-build-tests-manifest.json

@@ -14593,7 +14593,8 @@
       "passed": [],
       "failed": [
         "app-dir client-components-tree-shaking should only include imported components 3rd party package in browser bundle with direct imports",
-        "app-dir client-components-tree-shaking should only include imported relative components in browser bundle with direct imports"
+        "app-dir client-components-tree-shaking should only include imported relative components in browser bundle with direct imports",
+        "app-dir client-components-tree-shaking should only include the imported identifier of CJS module in browser bundle"
       ],
       "pending": [],
       "flakey": [],