Merge branch 'canary' into shu/dybn

vercel · Oct 7, 2022 · a96d06a · a96d06a
2 parents d11cacf + eb629c1
commit a96d06a
Show file tree

Hide file tree

Showing 146 changed files with 1,071 additions and 434 deletions.
diff --git a/docs/api-reference/next.config.js/introduction.md b/docs/api-reference/next.config.js/introduction.md
@@ -62,7 +62,7 @@ module.exports = async (phase, { defaultConfig }) => {
 }
 ```
 
-`phase` is the current context in which the configuration is loaded. You can see the [available phases](https://github.com/vercel/next.js/blob/canary/packages/next/shared/lib/constants.ts#L1-L5). Phases can be imported from `next/constants`:
+`phase` is the current context in which the configuration is loaded. You can see the [available phases](https://github.com/vercel/next.js/blob/5e6b008b561caf2710ab7be63320a3d549474a5b/packages/next/shared/lib/constants.ts#L19-L23). Phases can be imported from `next/constants`:
 
 ```js
 const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')

diff --git a/errors/edge-dynamic-code-evaluation.md b/errors/edge-dynamic-code-evaluation.md
@@ -29,6 +29,18 @@ export default async function middleware() {
 ```
 
 In rare cases, your code could contain (or import) some dynamic code evaluation statements which _can not be reached at runtime_ and which can not be removed by treeshaking.
-You can relax the check to allow specific files with your Middleware or Edge API Route exported [configuration](https://nextjs.org/docs/api-reference/edge-runtime#unsupported-apis).
+You can relax the check to allow specific files with your Middleware or Edge API Route exported [configuration](https://nextjs.org/docs/api-reference/edge-runtime#unsupported-apis):
+
+```typescript
+export const config = {
+  runtime: 'experimental-edge', // for Edge API Routes only
+  unstable_allowDynamic: [
+    '/lib/utilities.js', // allows a single file
+    '/node_modules/function-bind/**', // use a glob to allow anything in the function-bind 3rd party module
+  ],
+}
+```
+
+`unstable_allowDynamic` is a glob, or an array of globs, ignoring dynamic code evaluation for specific files. The globs are relative to your application root folder.
 
 Be warned that if these statements are executed on the Edge, _they will throw and cause a runtime error_.
diff --git a/errors/next-image-unconfigured-host.md b/errors/next-image-unconfigured-host.md
@@ -2,11 +2,29 @@
 
 #### Why This Error Occurred
 
-On one of your pages that leverages the `next/image` component, you passed a `src` value that uses a hostname in the URL that isn't defined in the `images.domains` config in `next.config.js`.
+One of your pages that leverages the `next/image` component, passed a `src` value that uses a hostname in the URL that isn't defined in the `images.remotePatterns` or `images.domains` in `next.config.js`.
 
 #### Possible Ways to Fix It
 
-Add the hostname of your URL to the `images.domains` config in `next.config.js`:
+Add the protocol, hostname, port, and pathname to the `images.remotePatterns` config in `next.config.js`:
+
+```js
+// next.config.js
+module.exports = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'example.com',
+        port: '',
+        pathname: '/account123/**',
+      },
+    ],
+  },
+}
+```
+
+If you are using an older version of Next.js prior to 12.3.0, you can use `images.domains` instead:
 
 ```js
 // next.config.js

diff --git a/lerna.json b/lerna.json
@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "12.3.2-canary.21"
+  "version": "12.3.2-canary.22"
 }
diff --git a/package.json b/package.json
@@ -183,8 +183,8 @@
     "react-17": "npm:react@17.0.2",
     "react-dom": "18.2.0",
     "react-dom-17": "npm:react-dom@17.0.2",
-    "react-dom-exp": "npm:react-dom@0.0.0-experimental-65b3449c8-20221005",
-    "react-exp": "npm:react@0.0.0-experimental-65b3449c8-20221005",
+    "react-dom-exp": "npm:react-dom@0.0.0-experimental-e40893d09-20221005",
+    "react-exp": "npm:react@0.0.0-experimental-e40893d09-20221005",
     "react-ssr-prepass": "1.0.8",
     "react-virtualized": "9.22.3",
     "relay-compiler": "13.0.2",

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.21",
+  "version": "12.3.2-canary.22",
   "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.21",
+  "version": "12.3.2-canary.22",
   "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.21",
+    "@next/eslint-plugin-next": "12.3.2-canary.22",
     "@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/package.json b/packages/eslint-plugin-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "12.3.2-canary.21",
+  "version": "12.3.2-canary.22",
   "description": "ESLint plugin for NextJS.",
   "main": "dist/index.js",
   "license": "MIT",

diff --git a/packages/font/google/index.js b/packages/font/google/index.js
@@ -1 +1 @@
-throw new Error('@next/font/google is not correctly setup')
+throw new Error('@next/font/google is not correctly configured')
diff --git a/packages/font/local/index.js b/packages/font/local/index.js
@@ -1 +1 @@
-throw new Error('@next/font/local is not correctly setup')
+throw new Error('@next/font/local is not correctly configured')
diff --git a/packages/font/package.json b/packages/font/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/font",
-  "version": "12.3.2-canary.21",
+  "version": "12.3.2-canary.22",
   "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.21",
+  "version": "12.3.2-canary.22",
   "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.21",
+  "version": "12.3.2-canary.22",
   "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.21",
+  "version": "12.3.2-canary.22",
   "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.21",
+  "version": "12.3.2-canary.22",
   "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.21",
+  "version": "12.3.2-canary.22",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"

diff --git a/packages/next-plugin-storybook/preset.js b/packages/next-plugin-storybook/preset.js
@@ -7,7 +7,7 @@ const CWD = process.cwd()
 
 async function webpackFinal(config) {
   const nextConfig = await loadConfig(PHASE_PRODUCTION_BUILD, CWD)
-  const pagesDir = findPagesDir(CWD, !!nextConfig.experimental.appDir)
+  const { pagesDir } = findPagesDir(CWD, !!nextConfig.experimental.appDir)
   const nextWebpackConfig = await getWebpackConfig(CWD, {
     pagesDir,
     entrypoints: {},

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.21",
+  "version": "12.3.2-canary.22",
   "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.21",
+  "version": "12.3.2-canary.22",
   "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.21",
+  "version": "12.3.2-canary.22",
   "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/index.ts b/packages/next/build/index.ts
@@ -301,8 +301,8 @@ export default async function build(
       setGlobal('telemetry', telemetry)
 
       const publicDir = path.join(dir, 'public')
-      const hasAppDir = !!config.experimental.appDir
-      const { pagesDir, appDir } = findPagesDir(dir, hasAppDir)
+      const isAppDirEnabled = !!config.experimental.appDir
+      const { pagesDir, appDir } = findPagesDir(dir, isAppDirEnabled)
 
       const hasPublicDir = await fileExists(publicDir)
 
@@ -394,7 +394,7 @@ export default async function build(
                   config.experimental.cpus,
                   config.experimental.workerThreads,
                   telemetry,
-                  hasAppDir
+                  isAppDirEnabled && !!appDir
                 )
               }),
         ])
@@ -1988,7 +1988,7 @@ export default async function build(
         combinedPages.length > 0 ||
         useStatic404 ||
         useDefaultStatic500 ||
-        hasAppDir
+        isAppDirEnabled
       ) {
         const staticGenerationSpan =
           nextBuildSpan.traceChild('static-generation')

diff --git a/packages/next/build/jest/jest.ts b/packages/next/build/jest/jest.ts
@@ -72,8 +72,8 @@ export default function nextJest(options: { dir?: string } = {}) {
         isEsmProject = packageConfig.type === 'module'
 
         nextConfig = await getConfig(resolvedDir)
-        const hasAppDir = !!nextConfig.experimental.appDir
-        const findPagesDirResult = findPagesDir(resolvedDir, hasAppDir)
+        const isAppDirEnabled = !!nextConfig.experimental.appDir
+        const findPagesDirResult = findPagesDir(resolvedDir, isAppDirEnabled)
         hasServerComponents = !!findPagesDirResult.appDir
         pagesDir = findPagesDirResult.pagesDir
         setUpEnv(resolvedDir, nextConfig)

diff --git a/packages/next/build/swc/options.js b/packages/next/build/swc/options.js
@@ -134,7 +134,9 @@ function getBaseSWCOptions({
     fontLoaders:
       nextConfig?.experimental?.fontLoaders && relativeFilePathFromRoot
         ? {
-            fontLoaders: Object.keys(nextConfig.experimental.fontLoaders),
+            fontLoaders: nextConfig.experimental.fontLoaders.map(
+              ({ loader }) => loader
+            ),
             relativeFilePathFromRoot,
           }
         : null,

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -563,7 +563,7 @@ export default async function getBaseWebpackConfig(
     rewrites.afterFiles.length > 0 ||
     rewrites.fallback.length > 0
 
-  const hasAppDir = !!config.experimental.appDir
+  const hasAppDir = !!config.experimental.appDir && !!appDir
   const hasConcurrentFeatures = hasReactRoot
   const hasServerComponents = hasAppDir
 
@@ -1202,8 +1202,8 @@ export default async function getBaseWebpackConfig(
 
   const fontLoaderTargets =
     config.experimental.fontLoaders &&
-    Object.keys(config.experimental.fontLoaders).map((fontLoader) => {
-      const resolved = require.resolve(fontLoader)
+    config.experimental.fontLoaders.map(({ loader }) => {
+      const resolved = require.resolve(loader)
       return path.join(resolved, '../target.css')
     })
 
@@ -1587,7 +1587,7 @@ export default async function getBaseWebpackConfig(
             ]
           : []),
         // Alias `next/dynamic` to React.lazy implementation for RSC
-        ...(hasServerComponents && appDir
+        ...(hasServerComponents
           ? [
               {
                 test: codeCondition.test,
@@ -1964,8 +1964,11 @@ export default async function getBaseWebpackConfig(
         !!config.experimental.sri?.algorithm &&
         new SubresourceIntegrityPlugin(config.experimental.sri.algorithm),
       isClient &&
-        config.experimental.fontLoaders &&
-        new FontLoaderManifestPlugin(),
+        fontLoaderTargets &&
+        new FontLoaderManifestPlugin({
+          appDirEnabled: !!config.experimental.appDir,
+          fontLoaderTargets,
+        }),
       !dev &&
         isClient &&
         new (require('./webpack/plugins/telemetry-plugin').TelemetryPlugin)(

diff --git a/packages/next/build/webpack/config/blocks/css/index.ts b/packages/next/build/webpack/config/blocks/css/index.ts
@@ -11,6 +11,7 @@ import {
   getGlobalModuleImportError,
   getLocalModuleImportError,
   getFontLoaderDocumentImportError,
+  getFontLoaderImportError,
 } from './messages'
 import { getPostCssPlugins } from './plugins'
 
@@ -183,12 +184,10 @@ export const css = curry(async function css(
 
   // Resolve the configured font loaders, the resolved files are noop files that next-font-loader will match
   let fontLoaders: [string, string][] | undefined = ctx.experimental.fontLoaders
-    ? Object.entries(ctx.experimental.fontLoaders).map(
-        ([fontLoader, fontLoaderOptions]: any) => [
-          path.join(require.resolve(fontLoader), '../target.css'),
-          fontLoaderOptions,
-        ]
-      )
+    ? ctx.experimental.fontLoaders.map(({ loader: fontLoader, options }) => [
+        path.join(require.resolve(fontLoader), '../target.css'),
+        options,
+      ])
     : undefined
 
   // Font loaders cannot be imported in _document.
@@ -232,6 +231,22 @@ export const css = curry(async function css(
         ],
       })
     )
+
+    fns.push(
+      loader({
+        oneOf: [
+          markRemovable({
+            test: fontLoaderPath,
+            use: {
+              loader: 'error-loader',
+              options: {
+                reason: getFontLoaderImportError(),
+              },
+            },
+          }),
+        ],
+      })
+    )
   })
 
   // CSS cannot be imported in _document. This comes before everything because

diff --git a/packages/next/build/webpack/config/blocks/css/messages.ts b/packages/next/build/webpack/config/blocks/css/messages.ts
@@ -33,7 +33,13 @@ export function getCustomDocumentError() {
 }
 
 export function getFontLoaderDocumentImportError() {
-  return `Font loaders ${chalk.bold('cannot')} be used within ${chalk.cyan(
-    'pages/_document.js'
-  )}.`
+  return `Font loader error:\nFont loaders ${chalk.bold(
+    'cannot'
+  )} be used within ${chalk.cyan('pages/_document.js')}.`
+}
+
+export function getFontLoaderImportError() {
+  return `Font loader error:\nFont loaders ${chalk.bold(
+    'cannot'
+  )} be used from within ${chalk.bold('node_modules')}.`
 }
diff --git a/packages/next/build/webpack/loaders/next-app-loader.ts b/packages/next/build/webpack/loaders/next-app-loader.ts
@@ -185,12 +185,6 @@ const nextAppLoader: webpack.LoaderDefinitionFunction<{
     export const AppRouter = require('next/dist/client/components/app-router.client.js').default
     export const LayoutRouter = require('next/dist/client/components/layout-router.client.js').default
     export const RenderFromTemplateContext = require('next/dist/client/components/render-from-template-context.client.js').default
-    export const HotReloader = ${
-      // Disable HotReloader component in production
-      this.mode === 'development'
-        ? `require('next/dist/client/components/hot-reloader.client.js').default`
-        : 'null'
-    }
 
     export const staticGenerationAsyncStorage = require('next/dist/client/components/static-generation-async-storage.js').staticGenerationAsyncStorage
     export const requestAsyncStorage = require('next/dist/client/components/request-async-storage.js').requestAsyncStorage