Ensure that external modules are not bundled into the client for RSC (vercel#31968)

If importing an external module inside a Server Component (`.server.js`), it shouldn't be bundled into the client. Only client components should be kept.

## Bug

- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`

Author: shuding

packages/next/build/webpack/loaders/next-flight-server-loader.ts

@@ -7,6 +7,12 @@ function isClientComponent(importSource: string, pageExtensions: string[]) {
   )
 }
 
+function isServerComponent(importSource: string, pageExtensions: string[]) {
+  return new RegExp(`\\.server(\\.(${pageExtensions.join('|')}))?`).test(
+    importSource
+  )
+}
+
 function isNextComponent(importSource: string) {
   return (
     importSource.includes('next/link') || importSource.includes('next/image')
@@ -39,11 +45,8 @@ async function parseImportsInfo(
     const node = body[i]
     switch (node.type) {
       case 'ImportDeclaration':
-        // When importing from a server component, ignore
         const importSource = node.source.value
 
-        // For the client compilation, we have to always import the component to
-        // ensure that all dependencies are tracked.
         if (!isClientCompilation) {
           if (
             !(
@@ -59,6 +62,22 @@ async function parseImportsInfo(
             node.source.start - lastIndex
           )
           transformedSource += JSON.stringify(`${node.source.value}?flight`)
+        } else {
+          // For the client compilation, we skip all modules imports but
+          // always keep client components in the bundle. All client components
+          // have to be imported from either server or client components.
+          if (
+            !(
+              isClientComponent(importSource, pageExtensions) ||
+              isServerComponent(importSource, pageExtensions) ||
+              // Special cases for Next.js APIs that are considered as client
+              // components:
+              isNextComponent(importSource) ||
+              isImageImport(importSource)
+            )
+          ) {
+            continue
+          }
         }
 
         lastIndex = node.source.end

test/integration/react-streaming-and-server-components/app/package.json

@@ -5,5 +5,8 @@
     "dev": "yarn lnext dev",
     "build": "yarn lnext build",
     "start": "yarn lnext start"
+  },
+  "dependencies": {
+    "moment": "*"
   }
 }

test/integration/react-streaming-and-server-components/app/pages/external-imports.server.js

@@ -0,0 +1,5 @@
+import moment from 'moment'
+
+export default function Page() {
+  return <div>date:{moment().toString()}</div>
+}

test/integration/react-streaming-and-server-components/test/index.test.js

@@ -182,6 +182,18 @@ describe('concurrentFeatures - dev', () => {
     expect(content).toMatchInlineSnapshot('"foo.client"')
   })
 
+  it('should not bundle external imports into client builds for RSC', async () => {
+    const html = await renderViaHTTP(context.appPort, '/external-imports')
+    expect(html).toContain('date:')
+
+    const distServerDir = join(distDir, 'static', 'chunks', 'pages')
+    const bundle = fs
+      .readFileSync(join(distServerDir, 'external-imports.js'))
+      .toString()
+
+    expect(bundle).not.toContain('moment')
+  })
+
   runBasicTests(context, 'dev')
 })