Merge branch 'canary' into font-loader-app-dir

vercel · Sep 26, 2022 · 4413469 · 4413469
2 parents fa7c48d + 2af6b63
commit 4413469
Show file tree

Hide file tree

Showing 38 changed files with 325 additions and 209 deletions.
diff --git a/errors/react-hydration-error.md b/errors/react-hydration-error.md
@@ -84,5 +84,5 @@ Common causes with css-in-js libraries:
 
 ### Useful Links
 
-- [React Hydration Documentation](https://reactjs.org/docs/react-dom.html#hydrate)
+- [React Hydration Documentation](https://reactjs.org/docs/react-dom-client.html#hydrateroot)
 - [Josh Comeau's article on React Hydration](https://www.joshwcomeau.com/react/the-perils-of-rehydration/)
diff --git a/examples/with-chakra-ui/README.md b/examples/with-chakra-ui/README.md
@@ -10,7 +10,7 @@ We are connecting the Next.js `_app.js` with `chakra-ui`'s Provider and theme so
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-chakra-ui)
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-chakra-ui-typescript&project-name=with-chakra-ui&repository-name=with-chakra-ui)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-chakra-ui&project-name=with-chakra-ui&repository-name=with-chakra-ui)
 
 ## How to use
 

diff --git a/lerna.json b/lerna.json
@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "12.3.2-canary.7"
+  "version": "12.3.2-canary.9"
 }
diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "12.3.2-canary.7",
+  "version": "12.3.2-canary.9",
   "keywords": [
     "react",
     "next",

diff --git a/packages/eslint-config-next/package.json b/packages/eslint-config-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "12.3.2-canary.7",
+  "version": "12.3.2-canary.9",
   "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.7",
+    "@next/eslint-plugin-next": "12.3.2-canary.9",
     "@rushstack/eslint-patch": "^1.1.3",
     "@typescript-eslint/parser": "^5.21.0",
     "eslint-import-resolver-node": "^0.3.6",

diff --git a/packages/eslint-plugin-next/lib/rules/no-head-element.js b/packages/eslint-plugin-next/lib/rules/no-head-element.js
@@ -14,7 +14,11 @@ module.exports = {
   create: function (context) {
     return {
       JSXOpeningElement(node) {
-        if (node.name.name !== 'head') {
+        const paths = context.getFilename()
+
+        const isInAppDir = paths.includes('app/') && !paths.includes('pages/')
+        // Only lint the <head> element in pages directory
+        if (node.name.name !== 'head' || isInAppDir) {
           return
         }
 

diff --git a/packages/eslint-plugin-next/package.json b/packages/eslint-plugin-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "12.3.2-canary.7",
+  "version": "12.3.2-canary.9",
   "description": "ESLint plugin for NextJS.",
   "main": "lib/index.js",
   "license": "MIT",

diff --git a/packages/font/package.json b/packages/font/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/font",
-  "version": "12.3.2-canary.7",
+  "version": "12.3.2-canary.9",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/font"

diff --git a/packages/next-bundle-analyzer/package.json b/packages/next-bundle-analyzer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "12.3.2-canary.7",
+  "version": "12.3.2-canary.9",
   "main": "index.js",
   "types": "index.d.ts",
   "license": "MIT",

diff --git a/packages/next-codemod/package.json b/packages/next-codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "12.3.2-canary.7",
+  "version": "12.3.2-canary.9",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",

diff --git a/packages/next-env/package.json b/packages/next-env/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "12.3.2-canary.7",
+  "version": "12.3.2-canary.9",
   "keywords": [
     "react",
     "next",

diff --git a/packages/next-mdx/package.json b/packages/next-mdx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "12.3.2-canary.7",
+  "version": "12.3.2-canary.9",
   "main": "index.js",
   "license": "MIT",
   "repository": {

diff --git a/packages/next-plugin-storybook/package.json b/packages/next-plugin-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "12.3.2-canary.7",
+  "version": "12.3.2-canary.9",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"

diff --git a/packages/next-polyfill-module/package.json b/packages/next-polyfill-module/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "12.3.2-canary.7",
+  "version": "12.3.2-canary.9",
   "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",

diff --git a/packages/next-polyfill-nomodule/package.json b/packages/next-polyfill-nomodule/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "12.3.2-canary.7",
+  "version": "12.3.2-canary.9",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",

diff --git a/packages/next-swc/package.json b/packages/next-swc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/swc",
-  "version": "12.3.2-canary.7",
+  "version": "12.3.2-canary.9",
   "private": true,
   "scripts": {
     "build-native": "napi build --platform -p next-swc-napi --cargo-name next_swc_napi native --features plugin",

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -1007,14 +1007,7 @@ export default async function getBaseWebpackConfig(
             alias: process.env.__NEXT_REACT_CHANNEL
               ? {
                   react: `react-${process.env.__NEXT_REACT_CHANNEL}`,
-                  'react/package.json': `react-${process.env.__NEXT_REACT_CHANNEL}/package.json`,
-                  'react/jsx-runtime': `react-${process.env.__NEXT_REACT_CHANNEL}/jsx-runtime`,
-                  'react/jsx-dev-runtime': `react-${process.env.__NEXT_REACT_CHANNEL}/jsx-dev-runtime`,
                   'react-dom': `react-dom-${process.env.__NEXT_REACT_CHANNEL}`,
-                  'react-dom/package.json': `react-dom-${process.env.__NEXT_REACT_CHANNEL}/package.json`,
-                  'react-dom/server': `react-dom-${process.env.__NEXT_REACT_CHANNEL}/server`,
-                  'react-dom/server.browser': `react-dom-${process.env.__NEXT_REACT_CHANNEL}/server.browser`,
-                  'react-dom/client': `react-dom-${process.env.__NEXT_REACT_CHANNEL}/client`,
                 }
               : false,
             conditionNames: ['react-server'],
@@ -1172,10 +1165,10 @@ export default async function getBaseWebpackConfig(
             context,
             request
           )
-          return resolved
+          return `${externalType} ${resolved}`
         } catch (err) {
-          // The `react-server` condition is not matched, fallback.
           return
+          // The `react-server` condition is not matched, fallback.
         }
       }
 

diff --git a/packages/next/build/webpack/loaders/next-font-loader/index.ts b/packages/next/build/webpack/loaders/next-font-loader/index.ts
@@ -22,7 +22,7 @@ export default async function nextFontLoader(this: any) {
       const interpolatedName = loaderUtils.interpolateName(
         this,
         // Font files ending with .p.(woff|woff2|eot|ttf|otf) are preloaded
-        `static/fonts/[hash]${preload ? '.p' : ''}.${ext}`,
+        `static/media/[hash]${preload ? '.p' : ''}.${ext}`,
         opts
       )
       const outputPath = `${assetPrefix}/_next/${interpolatedName}`

diff --git a/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts b/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts
@@ -16,7 +16,8 @@ import {
   COMPILER_NAMES,
   FLIGHT_SERVER_CSS_MANIFEST,
 } from '../../../shared/lib/constants'
-import { FlightCSSManifest } from './flight-manifest-plugin'
+import { FlightCSSManifest, traverseModules } from './flight-manifest-plugin'
+import { ASYNC_CLIENT_MODULES } from './flight-manifest-plugin'
 import { isClientComponentModule } from '../loaders/utils'
 
 interface Options {
@@ -64,6 +65,18 @@ export class FlightClientEntryPlugin {
     compiler.hooks.finishMake.tapPromise(PLUGIN_NAME, (compilation) => {
       return this.createClientEntries(compiler, compilation)
     })
+
+    compiler.hooks.afterCompile.tap(PLUGIN_NAME, (compilation) => {
+      traverseModules(compilation, (mod) => {
+        // The module must has request, and resource so it's not a new entry created with loader.
+        // Using the client layer module, which doesn't have `rsc` tag in buildInfo.
+        if (mod.request && mod.resource && !mod.buildInfo.rsc) {
+          if (compilation.moduleGraph.isAsync(mod)) {
+            ASYNC_CLIENT_MODULES.add(mod.resource)
+          }
+        }
+      })
+    })
   }
 
   async createClientEntries(compiler: any, compilation: any) {
@@ -380,6 +393,7 @@ export class FlightClientEntryPlugin {
             compilation.hooks.failedEntry.call(entry, options, err)
             return reject(err)
           }
+
           compilation.hooks.succeedEntry.call(entry, options, module)
           return resolve(module)
         }

diff --git a/packages/next/build/webpack/plugins/flight-manifest-plugin.ts b/packages/next/build/webpack/plugins/flight-manifest-plugin.ts
@@ -44,6 +44,11 @@ interface ManifestNode {
      * Chunks for the module. JS and CSS.
      */
     chunks: ManifestChunks
+
+    /**
+     * If chunk contains async module
+     */
+    async?: boolean
   }
 }
 
@@ -61,6 +66,37 @@ export type FlightCSSManifest = {
 
 const PLUGIN_NAME = 'FlightManifestPlugin'
 
+// Collect modules from server/edge compiler in client layer,
+// and detect if it's been used, and mark it as `async: true` for react.
+// So that react could unwrap the async module from promise and render module itself.
+export const ASYNC_CLIENT_MODULES = new Set<string>()
+
+export function traverseModules(
+  compilation: webpack.Compilation,
+  callback: (
+    mod: any,
+    chunk: webpack.Chunk,
+    chunkGroup: typeof compilation.chunkGroups[0]
+  ) => any
+) {
+  compilation.chunkGroups.forEach((chunkGroup) => {
+    chunkGroup.chunks.forEach((chunk: webpack.Chunk) => {
+      const chunkModules = compilation.chunkGraph.getChunkModulesIterable(
+        chunk
+        // TODO: Update type so that it doesn't have to be cast.
+      ) as Iterable<webpack.NormalModule>
+      for (const mod of chunkModules) {
+        callback(mod, chunk, chunkGroup)
+        const anyModule = mod as any
+        if (anyModule.modules) {
+          for (const subMod of anyModule.modules)
+            callback(subMod, chunk, chunkGroup)
+        }
+      }
+    })
+  })
+}
+
 export class FlightManifestPlugin {
   dev: Options['dev'] = false
   fontLoaderTargets?: Options['fontLoaderTargets']
@@ -121,21 +157,7 @@ export class FlightManifestPlugin {
       }
     }
 
-    compilation.chunkGroups.forEach((chunkGroup) => {
-      chunkGroup.chunks.forEach((chunk: webpack.Chunk) => {
-        const chunkModules = compilation.chunkGraph.getChunkModulesIterable(
-          chunk
-          // TODO: Update type so that it doesn't have to be cast.
-        ) as Iterable<webpack.NormalModule>
-        for (const mod of chunkModules) {
-          collectClientRequest(mod)
-          const anyModule = mod as any
-          if (anyModule.modules) {
-            for (const subMod of anyModule.modules) collectClientRequest(subMod)
-          }
-        }
-      })
-    })
+    traverseModules(compilation, (mod) => collectClientRequest(mod))
 
     compilation.chunkGroups.forEach((chunkGroup) => {
       const cssResourcesInChunkGroup = new Set<string>()
@@ -216,6 +238,8 @@ export class FlightManifestPlugin {
         }
 
         const exportsInfo = compilation.moduleGraph.getExportsInfo(mod)
+        const isAsyncModule = ASYNC_CLIENT_MODULES.has(mod.resource)
+
         const cjsExports = [
           ...new Set([
             ...mod.dependencies.map((dep) => {
@@ -268,6 +292,10 @@ export class FlightManifestPlugin {
               id,
               name,
               chunks: requiredChunks,
+              // E.g.
+              // page (server) -> local module (client) -> package (esm)
+              // The esm package will bubble up to make the entire chain till the client entry as async module.
+              async: isAsyncModule,
             }
           }
 
@@ -313,6 +341,8 @@ export class FlightManifestPlugin {
     const file = 'server/' + FLIGHT_MANIFEST
     const json = JSON.stringify(manifest)
 
+    ASYNC_CLIENT_MODULES.clear()
+
     assets[file + '.js'] = new sources.RawSource(
       'self.__RSC_MANIFEST=' + json
       // Work around webpack 4 type of RawSource being used

diff --git a/packages/next/compiled/@vercel/nft/index.js b/packages/next/compiled/@vercel/nft/index.js
diff --git a/packages/next/compiled/ora/index.js b/packages/next/compiled/ora/index.js
diff --git a/packages/next/package.json b/packages/next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "12.3.2-canary.7",
+  "version": "12.3.2-canary.9",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -47,7 +47,8 @@
     "types/index.d.ts",
     "types/global.d.ts",
     "types/compiled.d.ts",
-    "image-types/global.d.ts"
+    "image-types/global.d.ts",
+    "font"
   ],
   "bin": {
     "next": "./dist/bin/next"
@@ -68,7 +69,7 @@
     ]
   },
   "dependencies": {
-    "@next/env": "12.3.2-canary.7",
+    "@next/env": "12.3.2-canary.9",
     "@swc/helpers": "0.4.11",
     "caniuse-lite": "^1.0.30001406",
     "postcss": "8.4.14",
@@ -119,11 +120,11 @@
     "@hapi/accept": "5.0.2",
     "@napi-rs/cli": "2.7.0",
     "@napi-rs/triples": "1.1.0",
-    "@next/polyfill-module": "12.3.2-canary.7",
-    "@next/polyfill-nomodule": "12.3.2-canary.7",
-    "@next/react-dev-overlay": "12.3.2-canary.7",
-    "@next/react-refresh-utils": "12.3.2-canary.7",
-    "@next/swc": "12.3.2-canary.7",
+    "@next/polyfill-module": "12.3.2-canary.9",
+    "@next/polyfill-nomodule": "12.3.2-canary.9",
+    "@next/react-dev-overlay": "12.3.2-canary.9",
+    "@next/react-refresh-utils": "12.3.2-canary.9",
+    "@next/swc": "12.3.2-canary.9",
     "@segment/ajv-human-errors": "2.1.2",
     "@taskr/clear": "1.1.0",
     "@taskr/esnext": "1.1.0",

diff --git a/packages/react-dev-overlay/package.json b/packages/react-dev-overlay/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/react-dev-overlay",
-  "version": "12.3.2-canary.7",
+  "version": "12.3.2-canary.9",
   "description": "A development-only overlay for developing React applications.",
   "repository": {
     "url": "vercel/next.js",

diff --git a/packages/react-refresh-utils/package.json b/packages/react-refresh-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/react-refresh-utils",
-  "version": "12.3.2-canary.7",
+  "version": "12.3.2-canary.9",
   "description": "An experimental package providing utilities for React Refresh.",
   "repository": {
     "url": "vercel/next.js",