Merge branch 'canary' into font-metrics

lerna.json

@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "12.3.2-canary.39"
+  "version": "12.3.2-canary.40"
 }

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "12.3.2-canary.39",
+  "version": "12.3.2-canary.40",
   "keywords": [
     "react",
     "next",

packages/eslint-config-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "12.3.2-canary.39",
+  "version": "12.3.2-canary.40",
   "description": "ESLint configuration used by NextJS.",
   "main": "index.js",
   "license": "MIT",
@@ -9,7 +9,7 @@
     "directory": "packages/eslint-config-next"
   },
   "dependencies": {
-    "@next/eslint-plugin-next": "12.3.2-canary.39",
+    "@next/eslint-plugin-next": "12.3.2-canary.40",
     "@rushstack/eslint-patch": "^1.1.3",
     "@typescript-eslint/parser": "^5.21.0",
     "eslint-import-resolver-node": "^0.3.6",

packages/eslint-plugin-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "12.3.2-canary.39",
+  "version": "12.3.2-canary.40",
   "description": "ESLint plugin for NextJS.",
   "main": "dist/index.js",
   "license": "MIT",

packages/font/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/font",
-  "version": "12.3.2-canary.39",
+  "version": "12.3.2-canary.40",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/font"

packages/next-bundle-analyzer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "12.3.2-canary.39",
+  "version": "12.3.2-canary.40",
   "main": "index.js",
   "types": "index.d.ts",
   "license": "MIT",

packages/next-codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "12.3.2-canary.39",
+  "version": "12.3.2-canary.40",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",

packages/next-env/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "12.3.2-canary.39",
+  "version": "12.3.2-canary.40",
   "keywords": [
     "react",
     "next",

packages/next-mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "12.3.2-canary.39",
+  "version": "12.3.2-canary.40",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-plugin-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "12.3.2-canary.39",
+  "version": "12.3.2-canary.40",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"

packages/next-polyfill-module/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "12.3.2-canary.39",
+  "version": "12.3.2-canary.40",
   "description": "A standard library polyfill for ES Modules supporting browsers (Edge 16+, Firefox 60+, Chrome 61+, Safari 10.1+)",
   "main": "dist/polyfill-module.js",
   "license": "MIT",

packages/next-polyfill-nomodule/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "12.3.2-canary.39",
+  "version": "12.3.2-canary.40",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",

packages/next-swc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/swc",
-  "version": "12.3.2-canary.39",
+  "version": "12.3.2-canary.40",
   "private": true,
   "scripts": {
     "build-native": "napi build --platform -p next-swc-napi --cargo-name next_swc_napi --features plugin --js false native",

packages/next/build/webpack-config.ts

@@ -2,7 +2,7 @@ import ReactRefreshWebpackPlugin from 'next/dist/compiled/@next/react-refresh-ut
 import chalk from 'next/dist/compiled/chalk'
 import crypto from 'crypto'
 import { webpack } from 'next/dist/compiled/webpack/webpack'
-import path, { join as pathJoin, relative as relativePath } from 'path'
+import path from 'path'
 import { escapeStringRegexp } from '../shared/lib/escape-regexp'
 import {
   DOT_NEXT_ALIAS,
@@ -62,9 +62,12 @@ import { SubresourceIntegrityPlugin } from './webpack/plugins/subresource-integr
 import { FontLoaderManifestPlugin } from './webpack/plugins/font-loader-manifest-plugin'
 import { getSupportedBrowsers } from './utils'
 
-const NEXT_PROJECT_ROOT = pathJoin(__dirname, '..', '..')
-const NEXT_PROJECT_ROOT_DIST = pathJoin(NEXT_PROJECT_ROOT, 'dist')
-const NEXT_PROJECT_ROOT_DIST_CLIENT = pathJoin(NEXT_PROJECT_ROOT_DIST, 'client')
+const NEXT_PROJECT_ROOT = path.join(__dirname, '..', '..')
+const NEXT_PROJECT_ROOT_DIST = path.join(NEXT_PROJECT_ROOT, 'dist')
+const NEXT_PROJECT_ROOT_DIST_CLIENT = path.join(
+  NEXT_PROJECT_ROOT_DIST,
+  'client'
+)
 
 const babelIncludeRegexes: RegExp[] = [
   /next[\\/]dist[\\/](esm[\\/])?shared[\\/]lib/,
@@ -73,6 +76,8 @@ const babelIncludeRegexes: RegExp[] = [
   /[\\/](strip-ansi|ansi-regex|styled-jsx)[\\/]/,
 ]
 
+const reactPackagesRegex = /^(react(?:$|\/)|react-dom(?:$|\/))/
+
 const staticGenerationAsyncStorageRegex =
   /next[\\/]dist[\\/]client[\\/]components[\\/]static-generation-async-storage/
 
@@ -130,20 +135,12 @@ function isResourceInPackages(
       ? resource.startsWith(packageDirMapping.get(p)! + path.sep)
       : resource.includes(
           path.sep +
-            pathJoin('node_modules', p.replace(/\//g, path.sep)) +
+            path.join('node_modules', p.replace(/\//g, path.sep)) +
             path.sep
         )
   )
 }
 
-const bundledReactImports = [
-  'react',
-  'react-dom',
-  'react/jsx-runtime',
-  'react/jsx-dev-runtime',
-  'next/dist/compiled/react-server-dom-webpack/server.browser',
-]
-
 export function getDefineEnv({
   dev,
   config,
@@ -729,6 +726,16 @@ export default async function getBaseWebpackConfig(
     babel: getBabelOrSwcLoader(),
   }
 
+  const swcLoaderForRSC = hasServerComponents
+    ? useSWCLoader
+      ? getSwcLoader({ isServerLayer: true })
+      : // When using Babel, we will have to add the SWC loader
+        // as an additional pass to handle RSC correctly.
+        // This will cause some performance overhead but
+        // acceptable as Babel will not be recommended.
+        [getSwcLoader({ isServerLayer: true }), getBabelLoader()]
+    : []
+
   const pageExtensions = config.pageExtensions
 
   const outputPath =
@@ -747,10 +754,12 @@ export default async function getBaseWebpackConfig(
               ),
               [CLIENT_STATIC_FILES_RUNTIME_AMP]:
                 `./` +
-                relativePath(
-                  dir,
-                  pathJoin(NEXT_PROJECT_ROOT_DIST_CLIENT, 'dev', 'amp-dev')
-                ).replace(/\\/g, '/'),
+                path
+                  .relative(
+                    dir,
+                    path.join(NEXT_PROJECT_ROOT_DIST_CLIENT, 'dev', 'amp-dev')
+                  )
+                  .replace(/\\/g, '/'),
             }
           : {}),
         [CLIENT_STATIC_FILES_RUNTIME_MAIN]:
@@ -1069,7 +1078,10 @@ export default async function getBaseWebpackConfig(
 
     // Special internal modules that must be bundled for Server Components.
     if (layer === WEBPACK_LAYERS.server) {
-      if (bundledReactImports.includes(request)) {
+      if (
+        reactPackagesRegex.test(request) ||
+        request === 'next/dist/compiled/react-server-dom-webpack/server.browser'
+      ) {
         return
       }
     }
@@ -1082,9 +1094,13 @@ export default async function getBaseWebpackConfig(
       if (/^(?:next$)/.test(request)) {
         return `commonjs ${request}`
       }
+
       if (/^(react(?:$|\/)|react-dom(?:$|\/))/.test(request)) {
         // override react-dom to server-rendering-stub for server
-        if (request === 'react-dom' && hasAppDir && !isClient) {
+        if (
+          request === 'react-dom' &&
+          (layer === WEBPACK_LAYERS.client || layer === WEBPACK_LAYERS.server)
+        ) {
           request = 'react-dom/server-rendering-stub'
         }
         return `commonjs ${hasAppDir ? 'next/dist/compiled/' : ''}${request}`
@@ -1113,9 +1129,12 @@ export default async function getBaseWebpackConfig(
       // we need to process shared `router/router` and `dynamic`,
       // so that the DefinePlugin can inject process.env values
       const isNextExternal =
-        /next[/\\]dist[/\\](shared|server)[/\\](?!lib[/\\](router[/\\]router|dynamic))/.test(
-          localRes
-        )
+        // Treat next internals as non-external for server layer
+        layer === WEBPACK_LAYERS.server
+          ? false
+          : /next[/\\]dist[/\\](shared|server)[/\\](?!lib[/\\](router[/\\]router|dynamic))/.test(
+              localRes
+            )
 
       if (isNextExternal) {
         // Generate Next.js external import
@@ -1132,7 +1151,7 @@ export default async function getBaseWebpackConfig(
             .replace(/\\/g, '/')
         )
         return `commonjs ${externalRequest}`
-      } else {
+      } else if (layer !== WEBPACK_LAYERS.client) {
         // We don't want to retry local requests
         // with other preferEsm options
         return
@@ -1206,7 +1225,7 @@ export default async function getBaseWebpackConfig(
     // It doesn't matter what the extension is, as we'll transpile it anyway.
     if (config.experimental.transpilePackages && !resolvedExternalPackageDirs) {
       resolvedExternalPackageDirs = new Map()
-      // We need to reoslve all the external package dirs initially.
+      // We need to resolve all the external package dirs initially.
       for (const pkg of config.experimental.transpilePackages) {
         const pkgRes = await resolveExternal(
           dir,
@@ -1241,22 +1260,13 @@ export default async function getBaseWebpackConfig(
         return
       }
 
-      // Treat react packages as external for SSR layer,
-      // then let require-hook mapping them to internals.
+      // Treat react packages and next internals as external for SSR layer,
+      // also map react to builtin ones with require-hook.
       if (layer === WEBPACK_LAYERS.client) {
-        if (
-          [
-            'react',
-            'react/jsx-runtime',
-            'react/jsx-dev-runtime',
-            'react-dom',
-            'scheduler',
-          ].includes(request)
-        ) {
+        if (reactPackagesRegex.test(request)) {
           return `commonjs next/dist/compiled/${request}`
-        } else {
-          return
         }
+        return
       }
 
       if (shouldBeBundled) return
@@ -1634,10 +1644,8 @@ export default async function getBaseWebpackConfig(
                     // react to the direct file path, not the package name. In that case the condition
                     // will be ignored completely.
                     react: 'next/dist/compiled/react',
-                    'react-dom$': isClient
-                      ? 'next/dist/compiled/react-dom/index'
-                      : 'next/dist/compiled/react-dom/server-rendering-stub',
-                    'react-dom/client$': 'next/dist/compiled/react-dom/client',
+                    'react-dom$':
+                      'next/dist/compiled/react-dom/server-rendering-stub',
                   },
                 },
               },
@@ -1677,11 +1685,6 @@ export default async function getBaseWebpackConfig(
               // RSC server compilation loaders
               {
                 test: codeCondition.test,
-                include: [
-                  dir,
-                  // To let the internal client components passing through flight loader
-                  NEXT_PROJECT_ROOT_DIST,
-                ],
                 exclude: [staticGenerationAsyncStorageRegex],
                 issuerLayer: WEBPACK_LAYERS.server,
                 use: {
@@ -1715,7 +1718,6 @@ export default async function getBaseWebpackConfig(
                 // Alias react for switching between default set and share subset.
                 oneOf: [
                   {
-                    // test: codeCondition.test,
                     exclude: [staticGenerationAsyncStorageRegex],
                     issuerLayer: WEBPACK_LAYERS.server,
                     test(req: string) {
@@ -1743,13 +1745,22 @@ export default async function getBaseWebpackConfig(
                     },
                   },
                   {
+                    issuerLayer: WEBPACK_LAYERS.client,
                     test: codeCondition.test,
                     resolve: {
                       alias: {
                         react: 'next/dist/compiled/react',
-                        'react-dom$': isClient
-                          ? 'next/dist/compiled/react-dom/index'
-                          : 'next/dist/compiled/react-dom/server-rendering-stub',
+                        'react-dom$':
+                          'next/dist/compiled/react-dom/server-rendering-stub',
+                      },
+                    },
+                  },
+                  {
+                    test: codeCondition.test,
+                    resolve: {
+                      alias: {
+                        react: 'next/dist/compiled/react',
+                        'react-dom$': 'next/dist/compiled/react-dom',
                         'react-dom/client$':
                           'next/dist/compiled/react-dom/client',
                       },
@@ -1789,16 +1800,12 @@ export default async function getBaseWebpackConfig(
                     test: codeCondition.test,
                     issuerLayer: WEBPACK_LAYERS.server,
                     exclude: [staticGenerationAsyncStorageRegex],
-                    use: useSWCLoader
-                      ? getSwcLoader({ isServerLayer: true })
-                      : // When using Babel, we will have to add the SWC loader
-                        // as an additional pass to handle RSC correctly.
-                        // This will cause some performance overhead but
-                        // acceptable as Babel will not be recommended.
-                        [
-                          getSwcLoader({ isServerLayer: true }),
-                          getBabelLoader(),
-                        ],
+                    use: swcLoaderForRSC,
+                  },
+                  {
+                    test: codeCondition.test,
+                    resourceQuery: /__edge_ssr_entry__/,
+                    use: swcLoaderForRSC,
                   },
                 ]
               : []),

packages/next/build/webpack/plugins/flight-types-plugin.ts

@@ -45,7 +45,6 @@ interface IEntry {
       : `default: PageComponent`
   }
   config?: {}
-  Head?: any
   generateStaticParams?: (params?: PageParams) => Promise<any[]>
   revalidate?: RevalidateRange<TEntry> | false
   dynamic?: 'auto' | 'force-dynamic' | 'error' | 'force-static'