Merge branch 'canary' into minimal-mode-normalizing

.eslintignore

@@ -4,6 +4,7 @@ node_modules
 **/dist/**
 examples/with-typescript-eslint-jest/**
 examples/with-kea/**
+packages/next/bundles/webpack/packages/*.runtime.js
 packages/next/compiled/**/*
 packages/react-refresh-utils/**/*.js
 packages/react-dev-overlay/lib/**

.github/ISSUE_TEMPLATE/1.bug_report.yml

@@ -10,6 +10,12 @@ inputs:
   - type: description
     attributes:
       value: If you leave out sections there is a high likelihood it will be moved to the GitHub Discussions "Help" section.
+  - type: description
+    attributes:
+      value: 'Please first verify if your issue exists in the Next.js canary release line: `npm install next@canary`.'
+  - type: description
+    attributes:
+      value: 'next@canary is the beta version of Next.js. It includes all features and fixes that are pending to land on the stable release line.'
   - type: input
     attributes:
       label: What version of Next.js are you using?

.github/actions/next-stats-action/src/prepare/repo-setup.js

@@ -69,13 +69,17 @@ module.exports = (actionInfo) => {
       for (const pkg of pkgs) {
         const pkgPath = path.join(repoDir, 'packages', pkg)
         const packedPkgPath = path.join(pkgPath, `${pkg}-packed.tgz`)
-        // pack the package with yarn
-        await exec(`cd ${pkgPath} && yarn pack -f ${pkg}-packed.tgz`)
 
         const pkgDataPath = path.join(pkgPath, 'package.json')
         const pkgData = require(pkgDataPath)
         const { name } = pkgData
-        pkgDatas.set(name, { pkgDataPath, pkgData, packedPkgPath })
+        pkgDatas.set(name, {
+          pkgDataPath,
+          pkg,
+          pkgPath,
+          pkgData,
+          packedPkgPath,
+        })
         pkgPaths.set(name, packedPkgPath)
       }
 
@@ -93,6 +97,13 @@ module.exports = (actionInfo) => {
           'utf8'
         )
       }
+
+      // wait to pack packages until after dependency paths have been updated
+      // to the correct versions
+      for (const pkgName of pkgDatas.keys()) {
+        const { pkg, pkgPath } = pkgDatas.get(pkgName)
+        await exec(`cd ${pkgPath} && yarn pack -f ${pkg}-packed.tgz`)
+      }
       return pkgPaths
     },
   }

.github/workflows/build_test_deploy.yml

@@ -154,12 +154,13 @@ jobs:
       - run: exit 0
 
   testFutureDependencies:
-    name: React 17 + webpack 5 (Basic, Production, Acceptance)
+    name: Webpack 5 (Basic, Production, Acceptance)
     runs-on: ubuntu-latest
     env:
       NEXT_TELEMETRY_DISABLED: 1
       NEXT_TEST_JOB: 1
       HEADLESS: true
+      NEXT_WEBPACK5: 1
 
     steps:
       - uses: actions/checkout@v2
@@ -170,22 +171,42 @@ jobs:
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
         if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
 
-      - run: cat package.json | jq '.resolutions.webpack = "^5.11.1"' > package.json.tmp && mv package.json.tmp package.json
+      - run: yarn install --check-files
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
+
+      - run: xvfb-run node run-tests.js test/integration/{link-ref,production,basic,async-modules,font-optimization,ssr-ctx,worker-loader}/test/index.test.js test/acceptance/*.test.js
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
+
+  testLegacyReact:
+    name: React 16 + Webpack 4 (Basic, Production, Acceptance)
+    runs-on: ubuntu-latest
+    env:
+      NEXT_TELEMETRY_DISABLED: 1
+      NEXT_TEST_JOB: 1
+      HEADLESS: true
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - run: echo ::set-output name=DOCS_CHANGE::$(node skip-docs-change.js echo 'docs-only')
+        id: docs-change
+
+      - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
         if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
 
-      - run: cat package.json | jq '.resolutions.react = "^17.0.1"' > package.json.tmp && mv package.json.tmp package.json
+      - run: cat package.json | jq '.resolutions.react = "^16.14.0"' > package.json.tmp && mv package.json.tmp package.json
         if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
 
-      - run: cat package.json | jq '.resolutions."react-dom" = "^17.0.1"' > package.json.tmp && mv package.json.tmp package.json
+      - run: cat package.json | jq '.resolutions."react-dom" = "^16.14.0"' > package.json.tmp && mv package.json.tmp package.json
         if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
 
       - run: yarn install --check-files
         if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
 
-      - run: yarn list webpack react react-dom
+      - run: yarn list react react-dom
         if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
 
-      - run: xvfb-run node run-tests.js test/integration/{link-ref,production,basic,async-modules,font-optimization,ssr-ctx}/test/index.test.js test/acceptance/*.test.js
+      - run: xvfb-run node run-tests.js test/integration/{link-ref,production,basic,async-modules,font-optimization,ssr-ctx,worker-loader}/test/index.test.js test/acceptance/*.test.js
         if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
 
   testFirefox:

.prettierignore

@@ -2,6 +2,7 @@ node_modules
 **/.next/**
 **/_next/**
 **/dist/**
+packages/next/bundles/webpack/packages/*.runtime.js
 packages/next/compiled/**
 packages/react-refresh-utils/**/*.js
 packages/react-refresh-utils/**/*.d.ts
@@ -14,4 +15,4 @@ packages/next-codemod/transforms/__tests__/**/*
 packages/next-codemod/**/*.js
 packages/next-codemod/**/*.d.ts
 packages/next-env/**/*.d.ts
-test-timings.json
+test-timings.json

.prettierignore_staged

@@ -2,6 +2,7 @@
 **/_next/**
 **/dist/**
 packages/next/compiled/**/*
+packages/next/bundles/webpack/packages/*.runtime.js
 lerna.json
 packages/next-codemod/transforms/__testfixtures__/**/*
 packages/next-codemod/transforms/__tests__/**/*

check-pre-compiled.sh

@@ -1,5 +1,8 @@
 #!/bin/bash
 
+yarn --cwd packages/next/bundles
+cp packages/next/bundles/node_modules/webpack5/lib/hmr/HotModuleReplacement.runtime.js packages/next/bundles/webpack/packages/
+cp packages/next/bundles/node_modules/webpack5/lib/hmr/JavascriptHotModuleReplacement.runtime.js packages/next/bundles/webpack/packages/
 yarn --cwd packages/next ncc-compiled
 
 # Make sure to exit with 1 if there are changes after running ncc-compiled

docs/deployment.md

@@ -15,7 +15,7 @@ If you haven’t already done so, push your Next.js app to a Git provider of you
 Then, follow these steps:
 
 1. [Sign up to Vercel](https://vercel.com/signup) (no credit card is required).
-2. After signing up, you’ll arrive on the [“Import Project”](https://vercel.com/new) page. Under “From Git Repository”, choose the Git provider you use and set up an integration. (Instructions: [GitHub](https://vercel.com/docs/v2/git-integrations/vercel-for-github) / [GitLab](https://vercel.com/docs/v2/git-integrations/vercel-for-gitlab) / [BitBucket](https://vercel.com/docs/v2/git-integrations/vercel-for-bitbucket)).
+2. After signing up, you’ll arrive on the [“Import Project”](https://vercel.com/new) page. Under “From Git Repository”, choose the Git provider you use and set up an integration. (Instructions: [GitHub](https://vercel.com/docs/git/vercel-for-github) / [GitLab](https://vercel.com/docs/git/vercel-for-gitlab) / [BitBucket](https://vercel.com/docs/git/vercel-for-bitbucket)).
 3. Once that’s set up, click “Import Project From …” and import your Next.js app. It auto-detects that your app is using Next.js and sets up the build configuration for you. No need to change anything — everything should work just fine!
 4. After importing, it’ll deploy your Next.js app and provide you with a deployment URL. Click “Visit” to see your app in production.
 
@@ -40,13 +40,13 @@ By using the DPS workflow, in addition to doing _code reviews_, you can do _depl
 For example, the [hybrid pages](/docs/basic-features/pages.md) approach is fully supported out of the box.
 
 - Every page can either use [Static Generation](/docs/basic-features/pages.md#static-generation) or [Server-Side Rendering](/docs/basic-features/pages.md#server-side-rendering).
-- Pages that use [Static Generation](/docs/basic-features/pages.md#static-generation) and assets (JS, CSS, images, fonts, etc) will automatically be served from [Vercel's Edge Network](https://vercel.com/docs/v2/edge-network/overview), which is blazingly fast.
+- Pages that use [Static Generation](/docs/basic-features/pages.md#static-generation) and assets (JS, CSS, images, fonts, etc) will automatically be served from [Vercel's Edge Network](https://vercel.com/docs/edge-network/overview), which is blazingly fast.
 - Pages that use [Server-Side Rendering](/docs/basic-features/pages.md#server-side-rendering) and [API routes](/docs/api-routes/introduction.md) will automatically become isolated Serverless Functions. This allows page rendering and API requests to scale infinitely.
 
 ### Custom Domains, Environment Variables, Automatic HTTPS, and more
 
-- **Custom Domains:** Once deployed on [Vercel](https://vercel.com), you can assign a custom domain to your Next.js app. Take a look at [our documentation here](https://vercel.com/docs/v2/custom-domains).
-- **Environment Variables:** You can also set environment variables on Vercel. Take a look at [our documentation here](https://vercel.com/docs/v2/build-step#using-environment-variables-and-secrets). You can then [use those environment variables](/docs/api-reference/next.config.js/environment-variables.md) in your Next.js app.
+- **Custom Domains:** Once deployed on [Vercel](https://vercel.com), you can assign a custom domain to your Next.js app. Take a look at [our documentation here](https://vercel.com/docs/custom-domains).
+- **Environment Variables:** You can also set environment variables on Vercel. Take a look at [our documentation here](https://vercel.com/docs/environment-variables). You can then [use those environment variables](/docs/api-reference/next.config.js/environment-variables.md) in your Next.js app.
 - **Automatic HTTPS:** HTTPS is enabled by default (including custom domains) and doesn't require extra configuration. We auto-renew SSL certificates.
 - **More:** [Read our documentation](https://vercel.com/docs) to learn more about the Vercel platform.
 

errors/build-dir-not-writeable.md

@@ -2,7 +2,7 @@
 
 #### Why This Error Occurred
 
-The filesystem does not allow writing to the specified directory. A common cause for this error is starting a [custom server](https://nextjs.org/docs/advanced-features/custom-server) in development mode on a production server, for example, [Vercel](https://vercel.com) which [doesn't allow you to write to the filesystem after your app is built](https://vercel.com/docs/deployment-types/node#file-system-specifications).
+The filesystem does not allow writing to the specified directory. A common cause for this error is starting a [custom server](https://nextjs.org/docs/advanced-features/custom-server) in development mode on a production server, for example, [Vercel](https://vercel.com) which doesn't allow you to write to the filesystem after your app is built.
 
 #### Possible Ways to Fix It
 

errors/react-version.md

@@ -5,7 +5,7 @@
 Your project is using an old version of `react` or `react-dom` that does not
 meet the suggested minimum version requirement.
 
-Next.js suggests using, at a minimum, `react@16.10.0` and `react-dom@16.10.0`.
+Next.js suggests using, at a minimum, `react@17.0.1` and `react-dom@17.0.1`.
 Older versions of `react` and `react-dom` do work with Next.js, however, they do
 not enable all of Next.js' features.
 
@@ -39,8 +39,8 @@ yarn add react@latest react-dom@latest
 ```json
 {
   "dependencies": {
-    "react": "^16.10.0",
-    "react-dom": "^16.10.0"
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   }
 }
 ```

examples/with-carbon-components/package.json

@@ -15,7 +15,7 @@
     "carbon-components-react": "^7.3.0",
     "carbon-icons": "^7.0.7",
     "next": "latest",
-    "node-sass": "^4.12.0",
+    "sass": "^1.32.4",
     "react": "^16.7.0",
     "react-dom": "^16.7.0"
   }

examples/with-mongodb-mongoose/utils/dbConnect.js

@@ -11,6 +11,7 @@ async function dbConnect() {
     useNewUrlParser: true,
     useUnifiedTopology: true,
     useFindAndModify: false,
+    useCreateIndex: true,
   })
 }
 

examples/with-react-md-typescript/package.json

@@ -17,7 +17,7 @@
   "devDependencies": {
     "@types/node": "^14.0.27",
     "@types/react": "^16.9.43",
-    "node-sass": "^4.14.1",
+    "sass": "^1.32.4",
     "typescript": "^3.9.7"
   }
 }

examples/with-sentry/README.md

@@ -57,7 +57,7 @@ Your app should be up and running on [http://localhost:3000](http://localhost:30
 
 You will need to install and configure the [Sentry Vercel integration](https://docs.sentry.io/workflow/integrations/vercel). After you've completed the project linking step, all the needed environment variables will be set in your Vercel project, with the exception of `NEXT_PUBLIC_SENTRY_SERVER_ROOT_DIR`, which should be set to `/var/task/`.
 
-> **Note:** A Vercel project connected to a [Git integration](https://vercel.com/docs/v2/platform/deployments#git-integration) is required before adding the Sentry integration.
+> **Note:** A Vercel project connected to a [Git integration](https://vercel.com/docs/platform/deployments#git) is required before adding the Sentry integration.
 
 #### Without Using Vercel
 

examples/with-storybook-styled-jsx-scss/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "next": "^10.0.0",
-    "node-sass": "^4.14.1",
+    "sass": "^1.32.4",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "styled-jsx-plugin-sass": "^1.0.0"

examples/with-styled-jsx-scss/package.json

@@ -8,10 +8,10 @@
   },
   "dependencies": {
     "next": "latest",
-    "node-sass": "4.5.3",
+    "sass": "1.32.4",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
-    "styled-jsx-plugin-sass": "0.2.0"
+    "styled-jsx-plugin-sass": "1.0.0"
   },
   "license": "MIT"
 }

lerna.json

@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "10.0.6-canary.0"
+  "version": "10.0.6-canary.3"
 }

package.json

@@ -44,6 +44,11 @@
     "@babel/preset-react": "7.12.10",
     "@fullhuman/postcss-purgecss": "1.3.0",
     "@mdx-js/loader": "0.18.0",
+    "@opentelemetry/exporter-zipkin": "0.14.0",
+    "@opentelemetry/node": "0.14.0",
+    "@opentelemetry/plugin-http": "0.14.0",
+    "@opentelemetry/plugin-https": "0.14.0",
+    "@opentelemetry/tracing": "0.14.0",
     "@types/cheerio": "0.22.16",
     "@types/fs-extra": "8.1.0",
     "@types/http-proxy": "1.17.3",
@@ -74,7 +79,7 @@
     "eslint": "6.8.0",
     "eslint-plugin-import": "2.20.2",
     "eslint-plugin-jest": "23.13.1",
-    "eslint-plugin-react": "7.18.0",
+    "eslint-plugin-react": "7.19.0",
     "eslint-plugin-react-hooks": "2.3.0",
     "execa": "2.0.3",
     "express": "4.17.0",
@@ -110,8 +115,8 @@
     "prettier": "2.0.5",
     "pretty-bytes": "5.3.0",
     "pretty-ms": "7.0.0",
-    "react": "16.12.0",
-    "react-dom": "16.12.0",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
     "react-ssr-prepass": "1.0.8",
     "release": "6.3.0",
     "request-promise-core": "1.1.2",
@@ -129,12 +134,7 @@
     "wait-port": "0.2.2",
     "web-streams-polyfill": "2.1.1",
     "webpack-bundle-analyzer": "4.3.0",
-    "worker-loader": "2.0.0",
-    "@opentelemetry/exporter-zipkin": "0.14.0",
-    "@opentelemetry/node": "0.14.0",
-    "@opentelemetry/plugin-http": "0.14.0",
-    "@opentelemetry/plugin-https": "0.14.0",
-    "@opentelemetry/tracing": "0.14.0"
+    "worker-loader": "3.0.7"
   },
   "resolutions": {
     "browserslist": "^4.14.7",

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "10.0.6-canary.0",
+  "version": "10.0.6-canary.3",
   "keywords": [
     "react",
     "next",

packages/eslint-plugin-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "10.0.6-canary.0",
+  "version": "10.0.6-canary.3",
   "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": "10.0.6-canary.0",
+  "version": "10.0.6-canary.3",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "10.0.6-canary.0",
+  "version": "10.0.6-canary.3",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",

packages/next-env/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "10.0.6-canary.0",
+  "version": "10.0.6-canary.3",
   "keywords": [
     "react",
     "next",

packages/next-mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "10.0.6-canary.0",
+  "version": "10.0.6-canary.3",
   "main": "index.js",
   "license": "MIT",
   "repository": {

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

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-google-analytics",
-  "version": "10.0.6-canary.0",
+  "version": "10.0.6-canary.3",
   "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": "10.0.6-canary.0",
+  "version": "10.0.6-canary.3",
   "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": "10.0.6-canary.0",
+  "version": "10.0.6-canary.3",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"

packages/next-plugin-storybook/preset.js

@@ -28,7 +28,7 @@ async function webpackFinal(config) {
   config.module.rules = [
     ...config.module.rules.filter((rule) => {
       // the rules we're filtering use RegExp for the test
-      if (!rule.test instanceof RegExp) return true
+      if (!(rule.test instanceof RegExp)) return true
       // use Next.js' built-in CSS
       if (rule.test.test('hello.css')) {
         return false