Fix client component imports are not being correctly tracked (#30853)

* ensure client components are correctly tracked in the client compilation * fix test
vercel · Nov 3, 2021 · 0fa233b · 0fa233b
1 parent 3aff5d4
commit 0fa233b
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 11 deletions.
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -1187,7 +1187,7 @@ export default async function getBaseWebpackConfig(
               },
             ]
           : []),
-        ...(webServerRuntime && hasServerComponents
+        ...(hasServerComponents && webServerRuntime
           ? [
               {
                 ...codeCondition,

diff --git a/packages/next/build/webpack/loaders/next-flight-server-loader.ts b/packages/next/build/webpack/loaders/next-flight-server-loader.ts
@@ -42,17 +42,18 @@ async function parseImportsInfo(
         // When importing from a server component, ignore
         const importSource = node.source.value
 
-        if (
-          !(
-            isClientComponent(importSource, pageExtensions) ||
-            isNextComponent(importSource) ||
-            isImageImport(importSource)
-          )
-        ) {
-          continue
-        }
-
+        // For the client compilation, we have to always import the component to
+        // ensure that all dependencies are tracked.
         if (!isClientCompilation) {
+          if (
+            !(
+              isClientComponent(importSource, pageExtensions) ||
+              isNextComponent(importSource) ||
+              isImageImport(importSource)
+            )
+          ) {
+            continue
+          }
           transformedSource += source.substr(
             lastIndex,
             node.source.start - lastIndex
@@ -104,5 +105,6 @@ export default async function transformSource(
   const defaultExportNoop = isClientCompilation
     ? `\nexport default function Comp(){}\nComp.__next_rsc__=1`
     : ''
+
   return transformed + noop + defaultExportNoop
 }
diff --git a/test/integration/react-streaming-and-server-components/app/components/bar.server.js b/test/integration/react-streaming-and-server-components/app/components/bar.server.js
@@ -0,0 +1,9 @@
+import Foo from './foo.client'
+
+export default function Bar() {
+  return (
+    <div>
+      bar.server.js: <Foo />
+    </div>
+  )
+}
diff --git a/test/integration/react-streaming-and-server-components/app/pages/multi.server.js b/test/integration/react-streaming-and-server-components/app/pages/multi.server.js
@@ -0,0 +1,5 @@
+import Bar from '../components/bar.server'
+
+export default function Multi() {
+  return <Bar />
+}
diff --git a/test/integration/react-streaming-and-server-components/test/index.test.js b/test/integration/react-streaming-and-server-components/test/index.test.js
@@ -220,6 +220,12 @@ async function runBasicTests(context) {
 
     expect(imageTag.attr('src')).toContain('data:image')
   })
+
+  it('should support multi-level server component imports', async () => {
+    const html = await renderViaHTTP(context.appPort, '/multi')
+    expect(html).toContain('bar.server.js:')
+    expect(html).toContain('foo.client')
+  })
 }
 
 function runSuite(suiteName, env, { runTests, before, after }) {