tweak config

package.json

@@ -195,6 +195,7 @@
     "shell-quote": "1.7.3",
     "styled-components": "5.3.3",
     "styled-jsx-plugin-postcss": "3.0.2",
+    "swr": "2.0.0-rc.0",
     "tailwindcss": "1.1.3",
     "taskr": "1.1.0",
     "tree-kill": "1.2.2",

packages/next/build/entries.ts

@@ -207,7 +207,7 @@ export function getEdgeServerEntry(opts: {
     // The Edge bundle includes the server in its entrypoint, so it has to
     // be in the SSR layer — we later convert the page request to the RSC layer
     // via a webpack rule.
-    layer: undefined,
+    layer: WEBPACK_LAYERS.client,
   }
 }
 

packages/next/build/webpack-config.ts

@@ -125,9 +125,11 @@ function isResourceInPackages(resource: string, packageNames?: string[]) {
   )
 }
 
-const builtInReactImports = [
+const bundledReactImports = [
   'react',
   'react/jsx-runtime',
+  'react/jsx-dev-runtime',
+  'react-dom',
   'next/dist/compiled/react-server-dom-webpack/server.browser',
 ]
 
@@ -1046,7 +1048,22 @@ export default async function getBaseWebpackConfig(
 
     // Special internal modules that must be bundled for Server Components.
     if (layer === WEBPACK_LAYERS.server) {
-      if (builtInReactImports.includes(request)) {
+      if (bundledReactImports.includes(request)) {
+        return
+      }
+    }
+
+    // Treat react packages as external for SSR layer,
+    // then let require-hook mapping them to internals.
+    if (layer === WEBPACK_LAYERS.client) {
+      if (bundledReactImports.includes(request)) {
+        return (
+          'commonjs ' +
+          (request.startsWith('next/dist/compiled')
+            ? request
+            : `next/dist/compiled/${request}`)
+        )
+      } else {
         return
       }
     }
@@ -1613,7 +1630,12 @@ export default async function getBaseWebpackConfig(
           ? [
               {
                 test: codeCondition.test,
-                include: [appDir],
+                issuerLayer(layer: string) {
+                  return (
+                    layer === WEBPACK_LAYERS.client ||
+                    layer === WEBPACK_LAYERS.server
+                  )
+                },
                 resolve: {
                   alias: {
                     // Alias `next/dynamic` to React.lazy implementation for RSC
@@ -1630,7 +1652,7 @@ export default async function getBaseWebpackConfig(
                   {
                     // test: codeCondition.test,
                     issuerLayer: WEBPACK_LAYERS.server,
-                    test: (req: string) => {
+                    test(req: string) {
                       // If it's not a source code file, or has been opted out of
                       // bundling, don't resolve it.
                       if (

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

@@ -501,9 +501,9 @@ export class FlightClientEntryPlugin {
       {
         // By using the same entry name
         name: entryName,
-        // Layer should be undefined for the SSR modules
-        // This ensures the client components are
-        layer: undefined,
+        // Layer should be client for the SSR modules
+        // This ensures the client components are bundled on client layer
+        layer: WEBPACK_LAYERS.client,
       }
     )
 

test/e2e/app-dir/app-alias/tsconfig.json

@@ -17,8 +17,13 @@
     "baseUrl": ".",
     "paths": {
       "@/ui/*": ["ui/*"]
-    }
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }

test/e2e/app-dir/app-edge/tsconfig.json

@@ -17,7 +17,12 @@
     "baseUrl": ".",
     "paths": {
       "@/ui/*": ["ui/*"]
-    }
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]

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

@@ -2,6 +2,7 @@ import path from 'path'
 import { renderViaHTTP, fetchViaHTTP } from 'next-test-utils'
 import { createNext, FileRef } from 'e2e-utils'
 import { NextInstance } from 'test/lib/next-modes/base'
+import webdriver from 'next-webdriver'
 
 async function resolveStreamResponse(response: any, onData?: any) {
   let result = ''
@@ -31,6 +32,7 @@ describe('app dir - rsc external dependency', () => {
       dependencies: {
         react: 'latest',
         'react-dom': 'latest',
+        swr: '2.0.0-rc.0',
       },
       packageJson: {
         scripts: {
@@ -71,11 +73,20 @@ describe('app dir - rsc external dependency', () => {
     const serverHtml = await renderViaHTTP(next.url, '/external-imports/server')
     const sharedHtml = await renderViaHTTP(next.url, '/shared-esm-dep')
 
-    expect(clientHtml).toContain('module type:esm-export')
-    expect(clientHtml).toContain('export named:named')
-    expect(clientHtml).toContain('export value:123')
-    expect(clientHtml).toContain('export array:4,5,6')
-    expect(clientHtml).toContain('export object:{x:1}')
+    const browser = await webdriver(next.url, '/external-imports/client')
+    const browserClientText = await browser.elementByCss('#content').text()
+
+    function containClientContent(content) {
+      expect(content).toContain('module type:esm-export')
+      expect(content).toContain('export named:named')
+      expect(content).toContain('export value:123')
+      expect(content).toContain('export array:4,5,6')
+      expect(content).toContain('export object:{x:1}')
+      expect(content).toContain('swr-state')
+    }
+
+    containClientContent(clientHtml)
+    containClientContent(browserClientText)
 
     // support esm module imports on server side, and indirect imports from shared components
     expect(serverHtml).toContain('random-module-instance')

test/e2e/app-dir/rsc-external/app/external-imports/client/page.js

@@ -4,15 +4,20 @@ import getType, { named, value, array, obj } from 'non-isomorphic-text'
 
 import add from 'untranspiled-module'
 
+// ESM externals has react has a peer dependency
+import useSWR from 'swr'
+
 export default function Page() {
+  const { data } = useSWR('swr-state', (v) => v, { fallbackData: 'swr-state' })
   return (
-    <div>
+    <div id="content">
       <div>{`module type:${getType()}`}</div>
       <div>{`export named:${named}`}</div>
       <div>{`export value:${value}`}</div>
       <div>{`export array:${array.join(',')}`}</div>
       <div>{`export object:{x:${obj.x}}`}</div>
       <div>{`transpilePackages:${add(2, 3)}`}</div>
+      <div>{data}</div>
     </div>
   )
 }