fix: mixing namespace import and named import client components

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

@@ -670,7 +670,8 @@ export class FlightClientEntryPlugin {
             mod,
             modRequest,
             clientComponentImports,
-            importedIdentifiers
+            importedIdentifiers,
+            false
           )
         }
         return
@@ -707,19 +708,27 @@ export class FlightClientEntryPlugin {
           mod,
           modRequest,
           clientComponentImports,
-          importedIdentifiers
+          importedIdentifiers,
+          true
         )
 
         return
       }
 
       getModuleReferencesInOrder(mod, compilation.moduleGraph).forEach(
         (connection: any) => {
-          const dependencyIds: string[] = []
-          if (connection.dependency?.ids?.length) {
+          let dependencyIds: string[] = []
+          const depModule = connection.resolvedModule
+
+          // `ids` are the identifiers that are imported from the dependency,
+          // if it's present, it's an array of strings.
+          if (connection.dependency?.ids) {
             dependencyIds.push(...connection.dependency.ids)
+          } else {
+            dependencyIds = ['*']
           }
-          filterClientComponents(connection.resolvedModule, dependencyIds)
+
+          filterClientComponents(depModule, dependencyIds)
         }
       )
     }
@@ -1030,7 +1039,8 @@ function addClientImport(
   mod: webpack.NormalModule,
   modRequest: string,
   clientComponentImports: ClientComponentImports,
-  importedIdentifiers: string[]
+  importedIdentifiers: string[],
+  isFirstImport: boolean
 ) {
   const clientEntryType = getModuleBuildInfo(mod).rsc?.clientEntryType
   const isCjsModule = clientEntryType === 'cjs'
@@ -1039,23 +1049,33 @@ function addClientImport(
     isCjsModule ? 'commonjs' : 'auto'
   )
 
-  const isAutoModuleSourceType = assumedSourceType === 'auto'
-  if (isAutoModuleSourceType) {
-    clientComponentImports[modRequest] = new Set(['*'])
+  const clientImportsSet = clientComponentImports[modRequest]
+
+  if (importedIdentifiers[0] === '*') {
+    // If there's collected import path with named import identifiers,
+    // we should include the whole module.
+    if (!isFirstImport && [...clientImportsSet][0] !== '*') {
+      clientComponentImports[modRequest] = new Set(['*'])
+    }
   } else {
-    // If it's not analyzed as named ESM exports, e.g. if it's mixing `export *` with named exports,
-    // We'll include all modules since it's not able to do tree-shaking.
-    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')
-      }
+    const isAutoModuleSourceType = assumedSourceType === 'auto'
+    if (isAutoModuleSourceType) {
+      clientComponentImports[modRequest] = new Set(['*'])
+    } else {
+      // If it's not analyzed as named ESM exports, e.g. if it's mixing `export *` with named exports,
+      // We'll include all modules since it's not able to do tree-shaking.
+      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)
+        clientComponentImports[modRequest].add(name)
+      }
     }
   }
 }

test/production/app-dir/client-components-tree-shaking/app/client-import-namespace/client-module/client-module.js

@@ -0,0 +1,13 @@
+'use client'
+
+export function ClientModExportA() {
+  return 'client:mod-export-a'
+}
+
+export function ClientModExportB() {
+  return 'client:mod-export-b'
+}
+
+export function ClientModExportC() {
+  return 'client:mod-export-c'
+}

test/production/app-dir/client-components-tree-shaking/app/client-import-namespace/client-module/index.js

@@ -0,0 +1,7 @@
+'use client'
+
+export {
+  ClientModExportA,
+  ClientModExportB,
+  ClientModExportC,
+} from './client-module'

test/production/app-dir/client-components-tree-shaking/app/client-import-namespace/page.js

@@ -0,0 +1,29 @@
+import * as clientMod from './client-module'
+import { ClientModExportC } from './client-module'
+
+const map = {
+  ...clientMod,
+}
+
+export default function Page() {
+  const A = map.ClientModExportA
+  const B = map.ClientModExportB
+  const C = map.ClientModExportC
+
+  return (
+    <div>
+      <p id="a">
+        <A />
+      </p>
+      <p id="b">
+        <B />
+      </p>
+      <p id="c">
+        <C />
+      </p>
+      <p id="named-c">
+        <ClientModExportC />
+      </p>
+    </div>
+  )
+}

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

@@ -1,4 +1,4 @@
-import { ImportedComp } from './client'
+import { ImportedComp } from './client-relative-dep'
 
 export default function Page() {
   return <ImportedComp />

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

@@ -103,5 +103,14 @@ createNextDescribe(
 
       expect($('p').text()).toContain('client:mod-export-default')
     })
+
+    it('should handle mixing namespace imports and named imports from client components', async () => {
+      const $ = await next.render$('/client-import-namespace')
+
+      expect($('#a').text()).toContain('client:mod-export-a')
+      expect($('#b').text()).toContain('client:mod-export-b')
+      expect($('#c').text()).toContain('client:mod-export-c')
+      expect($('#named-c').text()).toContain('client:mod-export-c')
+    })
   }
 )