Merge branch 'canary' into add/gssp-redirect-handling

.github/workflows/build_test_deploy.yml

@@ -96,8 +96,8 @@ jobs:
     steps:
       - run: exit 0
 
-  testWebpack5:
-    name: webpack 5 (Basic, Production, Acceptance)
+  testFutureDependencies:
+    name: React 17 + webpack 5 (Basic, Production, Acceptance)
     runs-on: ubuntu-latest
     env:
       NEXT_TELEMETRY_DISABLED: 1
@@ -108,6 +108,8 @@ jobs:
       - uses: actions/checkout@v2
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
       - run: cat package.json | jq '.resolutions.webpack = "^5.0.0-beta.22"' > package.json.tmp && mv package.json.tmp package.json
+      - run: cat package.json | jq '.resolutions.react = "^17.0.0-rc.1"' > package.json.tmp && mv package.json.tmp package.json
+      - run: cat package.json | jq '.resolutions."react-dom" = "^17.0.0-rc.1"' > package.json.tmp && mv package.json.tmp package.json
       - run: yarn install --check-files
       - run: node run-tests.js test/integration/production/test/index.test.js
       - run: node run-tests.js test/integration/basic/test/index.test.js

lerna.json

@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "9.5.3-canary.25"
+  "version": "9.5.3-canary.26"
 }

package.json

@@ -37,9 +37,9 @@
   },
   "pre-commit": "lint-staged",
   "devDependencies": {
-    "@babel/plugin-proposal-object-rest-spread": "7.9.6",
-    "@babel/preset-flow": "7.9.0",
-    "@babel/preset-react": "7.9.4",
+    "@babel/plugin-proposal-object-rest-spread": "7.11.0",
+    "@babel/preset-flow": "7.10.4",
+    "@babel/preset-react": "7.10.4",
     "@fullhuman/postcss-purgecss": "1.3.0",
     "@mdx-js/loader": "0.18.0",
     "@types/cheerio": "0.22.16",
@@ -53,7 +53,7 @@
     "@zeit/next-sass": "1.0.2-canary.2",
     "@zeit/next-typescript": "1.1.2-canary.0",
     "abort-controller": "3.0.0",
-    "amphtml-validator": "1.0.30",
+    "amphtml-validator": "1.0.33",
     "async-sema": "3.0.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.0.3",

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "9.5.3-canary.25",
+  "version": "9.5.3-canary.26",
   "keywords": [
     "react",
     "next",

packages/eslint-plugin-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "9.5.3-canary.25",
+  "version": "9.5.3-canary.26",
   "description": "ESLint plugin for NextJS.",
   "main": "lib/index.js",
   "license": "MIT",

packages/next-bundle-analyzer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "9.5.3-canary.25",
+  "version": "9.5.3-canary.26",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "9.5.3-canary.25",
+  "version": "9.5.3-canary.26",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",

packages/next-mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "9.5.3-canary.25",
+  "version": "9.5.3-canary.26",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-plugin-google-analytics/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-google-analytics",
-  "version": "9.5.3-canary.25",
+  "version": "9.5.3-canary.26",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-google-analytics"

packages/next-plugin-sentry/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-sentry",
-  "version": "9.5.3-canary.25",
+  "version": "9.5.3-canary.26",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-sentry"

packages/next-plugin-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "9.5.3-canary.25",
+  "version": "9.5.3-canary.26",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"

packages/next-polyfill-nomodule/package.json

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

packages/next/build/babel/preset.ts

@@ -65,6 +65,9 @@ module.exports = (
   const supportsESM = api.caller(supportsStaticESM)
   const isServer = api.caller((caller: any) => !!caller && caller.isServer)
   const isModern = api.caller((caller: any) => !!caller && caller.isModern)
+  const hasJsxRuntime = Boolean(
+    api.caller((caller: any) => !!caller && caller.hasJsxRuntime)
+  )
 
   const isLaxModern =
     isModern ||
@@ -113,7 +116,7 @@ module.exports = (
           // This adds @babel/plugin-transform-react-jsx-source and
           // @babel/plugin-transform-react-jsx-self automatically in development
           development: isDevelopment || isTest,
-          pragma: '__jsx',
+          ...(hasJsxRuntime ? { runtime: 'automatic' } : { pragma: '__jsx' }),
           ...options['preset-react'],
         },
       ],
@@ -123,7 +126,7 @@ module.exports = (
       ],
     ],
     plugins: [
-      [
+      !hasJsxRuntime && [
         require('./plugins/jsx-pragma'),
         {
           // This produces the following injected import for modules containing JSX:
@@ -181,14 +184,10 @@ module.exports = (
       require('@babel/plugin-proposal-optional-chaining'),
       require('@babel/plugin-proposal-nullish-coalescing-operator'),
       isServer && require('@babel/plugin-syntax-bigint'),
-      [require('@babel/plugin-proposal-numeric-separator').default, false],
+      // Always compile numeric separator because the resulting number is
+      // smaller.
+      require('@babel/plugin-proposal-numeric-separator'),
       require('@babel/plugin-proposal-export-namespace-from'),
     ].filter(Boolean),
-    overrides: [
-      {
-        test: /\.tsx?$/,
-        plugins: [require('@babel/plugin-proposal-numeric-separator').default],
-      },
-    ],
   }
 }

packages/next/build/webpack-config.ts

@@ -3,6 +3,7 @@ import ReactRefreshWebpackPlugin from '@next/react-refresh-utils/ReactRefreshWeb
 import crypto from 'crypto'
 import { readFileSync } from 'fs'
 import chalk from 'next/dist/compiled/chalk'
+import semver from 'next/dist/compiled/semver'
 import TerserPlugin from 'next/dist/compiled/terser-webpack-plugin'
 import path from 'path'
 import webpack from 'webpack'
@@ -14,6 +15,8 @@ import {
   PAGES_DIR_ALIAS,
 } from '../lib/constants'
 import { fileExists } from '../lib/file-exists'
+import { getPackageVersion } from '../lib/get-package-version'
+import { Rewrite } from '../lib/load-custom-routes'
 import { resolveRequest } from '../lib/resolve-request'
 import { getTypeScriptConfiguration } from '../lib/typescript/getTypeScriptConfiguration'
 import {
@@ -54,7 +57,7 @@ import WebpackConformancePlugin, {
   ReactSyncScriptsConformanceCheck,
 } from './webpack/plugins/webpack-conformance-plugin'
 import { WellKnownErrorsPlugin } from './webpack/plugins/wellknown-errors-plugin'
-import { Rewrite } from '../lib/load-custom-routes'
+
 type ExcludesFalse = <T>(x: T | false) => x is T
 
 const isWebpack5 = parseInt(webpack.version!) === 5
@@ -226,7 +229,13 @@ export default async function getBaseWebpackConfig(
     }
   }
 
-  const hasReactRefresh = dev && !isServer
+  const reactVersion = await getPackageVersion({ cwd: dir, name: 'react' })
+  const hasReactRefresh: boolean = dev && !isServer
+  const hasJsxRuntime: boolean =
+    Boolean(reactVersion) &&
+    // 17.0.0-rc.0 had a breaking change not compatible with Next.js, but was
+    // fixed in rc.1.
+    semver.gte(reactVersion!, '17.0.0-rc.1')
 
   const distDir = path.join(dir, config.distDir)
   const defaultLoaders = {
@@ -243,6 +252,7 @@ export default async function getBaseWebpackConfig(
         hasModern: !!config.experimental.modern,
         development: dev,
         hasReactRefresh,
+        hasJsxRuntime,
       },
     },
     // Backwards compat

packages/next/build/webpack/loaders/next-babel-loader.js

@@ -3,9 +3,9 @@ import hash from 'next/dist/compiled/string-hash'
 import { basename, join } from 'path'
 import * as Log from '../../output/log'
 
-// increment 'm' to invalidate cache
+// increment 'n' to invalidate cache
 // eslint-disable-next-line no-useless-concat
-const cacheKey = 'babel-cache-' + 'm' + '-'
+const cacheKey = 'babel-cache-' + 'n' + '-'
 const nextBabelPreset = require('../../babel/preset')
 
 const getModernOptions = (babelOptions = {}) => {
@@ -61,6 +61,7 @@ module.exports = babelLoader.custom((babel) => {
         babelPresetPlugins: opts.babelPresetPlugins,
         development: opts.development,
         hasReactRefresh: opts.hasReactRefresh,
+        hasJsxRuntime: opts.hasJsxRuntime,
       }
       const filename = join(opts.cwd, 'noop.js')
       const loader = Object.assign(
@@ -76,6 +77,7 @@ module.exports = babelLoader.custom((babel) => {
                 '-new-polyfills' +
                 (opts.development ? '-development' : '-production') +
                 (opts.hasReactRefresh ? '-react-refresh' : '') +
+                (opts.hasJsxRuntime ? '-jsx-runtime' : '') +
                 JSON.stringify(
                   babel.loadPartialConfig({
                     filename,
@@ -99,6 +101,7 @@ module.exports = babelLoader.custom((babel) => {
       delete loader.babelPresetPlugins
       delete loader.development
       delete loader.hasReactRefresh
+      delete loader.hasJsxRuntime
       return { loader, custom }
     },
     config(
@@ -113,6 +116,7 @@ module.exports = babelLoader.custom((babel) => {
           babelPresetPlugins,
           development,
           hasReactRefresh,
+          hasJsxRuntime,
         },
       }
     ) {
@@ -136,6 +140,7 @@ module.exports = babelLoader.custom((babel) => {
       options.caller.isServer = isServer
       options.caller.isModern = isModern
       options.caller.isDev = development
+      options.caller.hasJsxRuntime = hasJsxRuntime
 
       const emitWarning = this.emitWarning.bind(this)
       Object.defineProperty(options.caller, 'onWarning', {

packages/next/client/index.tsx

@@ -21,8 +21,6 @@ import PageLoader, { looseToArray, StyleSheetTuple } from './page-loader'
 import measureWebVitals from './performance-relayer'
 import { createRouter, makePublicRouterInstance } from './router'
 
-require('next/dist/build/polyfills/finally-polyfill.min')
-
 /// <reference types="react-dom/experimental" />
 
 declare let __webpack_public_path__: string
@@ -43,6 +41,10 @@ declare global {
 type RenderRouteInfo = PrivateRouteInfo & { App: AppComponent }
 type RenderErrorProps = Omit<RenderRouteInfo, 'Component' | 'styleSheets'>
 
+if (!('finally' in Promise.prototype)) {
+  ;(Promise.prototype as PromiseConstructor['prototype']).finally = require('next/dist/build/polyfills/finally-polyfill.min')
+}
+
 const data: typeof window['__NEXT_DATA__'] = JSON.parse(
   document.getElementById('__NEXT_DATA__')!.textContent!
 )

packages/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "9.5.3-canary.25",
+  "version": "9.5.3-canary.26",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -59,26 +59,26 @@
   },
   "dependencies": {
     "@ampproject/toolbox-optimizer": "2.6.0",
-    "@babel/code-frame": "7.8.3",
+    "@babel/code-frame": "7.10.4",
     "@babel/core": "7.7.7",
-    "@babel/plugin-proposal-class-properties": "7.8.3",
+    "@babel/plugin-proposal-class-properties": "7.10.4",
     "@babel/plugin-proposal-export-namespace-from": "7.10.4",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "7.8.3",
-    "@babel/plugin-proposal-numeric-separator": "7.8.3",
-    "@babel/plugin-proposal-object-rest-spread": "7.9.6",
-    "@babel/plugin-proposal-optional-chaining": "7.9.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "7.10.4",
+    "@babel/plugin-proposal-numeric-separator": "7.10.4",
+    "@babel/plugin-proposal-object-rest-spread": "7.11.0",
+    "@babel/plugin-proposal-optional-chaining": "7.11.0",
     "@babel/plugin-syntax-bigint": "7.8.3",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "7.9.6",
-    "@babel/plugin-transform-runtime": "7.9.6",
-    "@babel/preset-env": "7.9.6",
-    "@babel/preset-modules": "0.1.3",
-    "@babel/preset-react": "7.9.4",
-    "@babel/preset-typescript": "7.9.0",
-    "@babel/runtime": "7.9.6",
-    "@babel/types": "7.9.6",
-    "@next/react-dev-overlay": "9.5.3-canary.25",
-    "@next/react-refresh-utils": "9.5.3-canary.25",
+    "@babel/plugin-transform-modules-commonjs": "7.10.4",
+    "@babel/plugin-transform-runtime": "7.11.5",
+    "@babel/preset-env": "7.11.5",
+    "@babel/preset-modules": "0.1.4",
+    "@babel/preset-react": "7.10.4",
+    "@babel/preset-typescript": "7.10.4",
+    "@babel/runtime": "7.11.2",
+    "@babel/types": "7.11.5",
+    "@next/react-dev-overlay": "9.5.3-canary.26",
+    "@next/react-refresh-utils": "9.5.3-canary.26",
     "ast-types": "0.13.2",
     "babel-plugin-syntax-jsx": "6.18.0",
     "babel-plugin-transform-define": "2.0.0",
@@ -123,7 +123,7 @@
     "react-dom": "^16.6.0"
   },
   "devDependencies": {
-    "@next/polyfill-nomodule": "9.5.3-canary.25",
+    "@next/polyfill-nomodule": "9.5.3-canary.26",
     "@taskr/clear": "1.1.0",
     "@taskr/esnext": "1.1.0",
     "@taskr/watch": "1.1.0",
@@ -160,7 +160,7 @@
     "@types/text-table": "0.2.1",
     "@types/webpack-sources": "0.1.5",
     "@zeit/ncc": "0.22.0",
-    "amphtml-validator": "1.0.31",
+    "amphtml-validator": "1.0.33",
     "arg": "4.1.0",
     "async-retry": "1.2.3",
     "async-sema": "3.0.0",
@@ -169,7 +169,7 @@
     "cache-loader": "4.1.0",
     "chalk": "2.4.2",
     "ci-info": "watson/ci-info#f43f6a1cefff47fb361c88cf4b943fdbcaafe540",
-    "comment-json": "3.0.2",
+    "comment-json": "3.0.3",
     "compression": "1.7.4",
     "conf": "5.0.0",
     "content-type": "1.0.4",
@@ -181,7 +181,7 @@
     "escape-string-regexp": "2.0.0",
     "etag": "1.8.1",
     "file-loader": "6.0.0",
-    "finally-polyfill": "0.2.0",
+    "finally-polyfill": "0.1.0",
     "find-up": "4.1.0",
     "fresh": "0.5.2",
     "gzip-size": "5.1.1",

packages/react-dev-overlay/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/react-dev-overlay",
-  "version": "9.5.3-canary.25",
+  "version": "9.5.3-canary.26",
   "description": "A development-only overlay for developing React applications.",
   "repository": {
     "url": "vercel/next.js",
@@ -16,7 +16,7 @@
     "build": "tsc -d -w -p tsconfig.json"
   },
   "dependencies": {
-    "@babel/code-frame": "7.8.3",
+    "@babel/code-frame": "7.10.4",
     "ally.js": "1.4.1",
     "anser": "1.4.9",
     "chalk": "4.0.0",

packages/react-refresh-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/react-refresh-utils",
-  "version": "9.5.3-canary.25",
+  "version": "9.5.3-canary.26",
   "description": "An experimental package providing utilities for React Refresh.",
   "repository": {
     "url": "vercel/next.js",