Merge branch 'canary' into vary-accept

.github/CODEOWNERS

@@ -1,6 +1,6 @@
 # Learn how to add code owners here:
 # https://help.github.com/en/articles/about-code-owners
 
-*          @timneutkens @ijjk @lfades @divmain @shuding
-/docs/     @timneutkens @ijjk @lfades @divmain @shuding @leerob
-/examples/ @timneutkens @ijjk @lfades @divmain @shuding @leerob
+*          @timneutkens @ijjk @shuding @styfle @huozhi @padmaia
+/docs/     @timneutkens @ijjk @shuding @styfle @huozhi @padmaia @leerob @lfades
+/examples/ @timneutkens @ijjk @shuding @styfle @huozhi @padmaia @leerob @lfades

.github/workflows/build_test_deploy.yml

@@ -55,7 +55,7 @@ jobs:
         with:
           path: ./*
           key: ${{ github.sha }}
-      - run: ./check-pre-compiled.sh
+      - run: ./scripts/check-pre-compiled.sh
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
   testUnit:
@@ -146,7 +146,7 @@ jobs:
           path: ./*
           key: ${{ github.sha }}
 
-      - run: bash ./test-pnp.sh
+      - run: bash ./scripts/test-pnp.sh
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
   testsPass:
@@ -251,7 +251,7 @@ jobs:
           path: ./*
           key: ${{ github.sha }}
 
-      - run: ./publish-release.sh
+      - run: ./scripts/publish-release.sh
 
   prStats:
     name: Release Stats
@@ -263,7 +263,7 @@ jobs:
         with:
           path: ./*
           key: ${{ github.sha }}
-      - run: ./release-stats.sh
+      - run: ./scripts/release-stats.sh
       - uses: ./.github/actions/next-stats-action
         env:
           PR_STATS_COMMENT_TOKEN: ${{ secrets.PR_STATS_COMMENT_TOKEN }}

examples/with-env-from-next-config-js/README.md

@@ -39,7 +39,7 @@ Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&ut
 > ## Special note
 >
 > `next build` does a hard coded variable substitution into your JavaScript before the final bundle is created. This means
-> that if you change your environmental variables outside of your running app, such as in windows with `set` or lunix with `setenv`
+> that if you change your environmental variables outside of your running app, such as in windows with `set` or linux with `setenv`
 > those changes will not be reflected in your running application until a build happens again (with `next build`).
 
 ## Discussion regarding this example

package.json

@@ -34,6 +34,7 @@
     "publish-canary": "lerna version prerelease --preid canary --force-publish && release --pre --skip-questions",
     "publish-stable": "lerna version --force-publish",
     "lint-staged": "lint-staged",
+    "next-with-deps": "./scripts/next-with-deps.sh",
     "next": "node --trace-deprecation --enable-source-maps packages/next/dist/bin/next",
     "debug": "node --inspect packages/next/dist/bin/next"
   },

packages/next/client/index.tsx

@@ -462,6 +462,14 @@ export function renderError(renderErrorProps: RenderErrorProps): Promise<any> {
   return pageLoader
     .loadPage('/_error')
     .then(({ page: ErrorComponent, styleSheets }) => {
+      return lastAppProps?.Component === ErrorComponent
+        ? import('../pages/_error').then((m) => ({
+            ErrorComponent: m.default as React.ComponentType<{}>,
+            styleSheets: [],
+          }))
+        : { ErrorComponent, styleSheets }
+    })
+    .then(({ ErrorComponent, styleSheets }) => {
       // In production we do a normal render with the `ErrorComponent` as component.
       // If we've gotten here upon initial render, we can use the props from the server.
       // Otherwise, we need to call `getInitialProps` on `App` before mounting.

packages/next/taskfile-babel.js

@@ -6,26 +6,26 @@ const path = require('path')
 // eslint-disable-next-line import/no-extraneous-dependencies
 const transform = require('@babel/core').transform
 
+const babelClientPresetEnvOptions = {
+  modules: 'commonjs',
+  targets: {
+    esmodules: true,
+  },
+  bugfixes: true,
+  loose: true,
+  // This is handled by the Next.js webpack config that will run next/babel over the same code.
+  exclude: [
+    'transform-typeof-symbol',
+    'transform-async-to-generator',
+    'transform-spread',
+    'proposal-dynamic-import',
+  ],
+}
+
 const babelClientOpts = {
   presets: [
     '@babel/preset-typescript',
-    [
-      '@babel/preset-env',
-      {
-        modules: 'commonjs',
-        targets: {
-          esmodules: true,
-        },
-        bugfixes: true,
-        loose: true,
-        // This is handled by the Next.js webpack config that will run next/babel over the same code.
-        exclude: [
-          'transform-typeof-symbol',
-          'transform-async-to-generator',
-          'transform-spread',
-        ],
-      },
-    ],
+    ['@babel/preset-env', babelClientPresetEnvOptions],
     ['@babel/preset-react', { useBuiltIns: true }],
   ],
   plugins: [

check-examples.sh → scripts/check-examples.sh

@@ -1,7 +1,5 @@
 #!/bin/bash
 
-cd `dirname $0`
-
 for folder in examples/* ; do
   cp -n packages/create-next-app/templates/default/gitignore $folder/.gitignore;
   if [ -f "$folder/package.json" ]; then

scripts/next-with-deps.sh

@@ -0,0 +1,39 @@
+#!/bin/bash
+
+START_DIR=$PWD
+# gets last argument which should be the project dir
+for PROJECT_DIR in $@;do :;done
+
+if [ -z $PROJECT_DIR ];then
+  echo "No project directory provided, exiting..."
+  exit 1;
+fi;
+
+if [ ! -d $PROJECT_DIR ];then
+  echo "Invalid project directory provided, exiting..."
+  exit 1;
+fi;
+
+if [ $PROJECT_DIR == $PWD ] || [ "$PROJECT_DIR" == "." ];then
+  echo "Project directory can not be root, exiting..."
+  exit 1;
+fi;
+
+CONFLICTING_DEPS=("react" "react-dom" "styled-jsx" "next")
+
+for dep in ${CONFLICTING_DEPS[@]};do 
+  if [ -d "$PROJECT_DIR/node_modules/$dep" ];then
+    HAS_CONFLICTING_DEP="yup"
+  fi;
+done
+
+if [ ! -z $HAS_CONFLICTING_DEP ] || [ ! -d "$PROJECT_DIR/node_modules" ];then
+  cd $PROJECT_DIR
+  yarn install
+  for dep in ${CONFLICTING_DEPS[@]};do 
+    rm -rf node_modules/$dep
+  done
+fi
+
+cd $START_DIR
+yarn next $@

skip-docs-change.js

@@ -3,7 +3,16 @@ const { exec: execOrig, spawn } = require('child_process')
 
 const exec = promisify(execOrig)
 
-const DOCS_FOLDERS = ['bench', 'docs', 'errors', 'examples']
+const DOCS_FOLDERS = [
+  'bench',
+  'docs',
+  'errors',
+  'examples',
+  'UPGRADING.md',
+  'contributing.md',
+  'CODE_OF_CONDUCT.md',
+  'readme.md',
+]
 
 async function main() {
   await exec('git fetch origin canary')

test/integration/custom-error-page-exception/pages/_error.js

@@ -0,0 +1,12 @@
+/* eslint-disable no-unused-expressions, no-undef */
+let renderCount = 0
+
+export default function Error() {
+  renderCount++
+
+  // Guard to avoid endless loop crashing the browser tab.
+  if (typeof window !== 'undefined' && renderCount < 3) {
+    throw new Error('crash')
+  }
+  return `error threw ${renderCount} times`
+}

test/integration/custom-error-page-exception/pages/index.js

@@ -0,0 +1,20 @@
+/* eslint-disable no-unused-expressions, no-unused-vars */
+import React from 'react'
+import Link from 'next/link'
+
+function page() {
+  return (
+    <Link href="/">
+      <a id="nav">Client side nav</a>
+    </Link>
+  )
+}
+
+page.getInitialProps = () => {
+  if (typeof window !== 'undefined') {
+    throw new Error('Oops from Home')
+  }
+  return {}
+}
+
+export default page

test/integration/custom-error-page-exception/test/index.test.js

@@ -0,0 +1,26 @@
+/* eslint-env jest */
+
+import { join } from 'path'
+import webdriver from 'next-webdriver'
+import { nextBuild, nextStart, findPort, killApp } from 'next-test-utils'
+
+jest.setTimeout(1000 * 60 * 1)
+
+const appDir = join(__dirname, '..')
+const navSel = '#nav'
+const errorMessage = 'Application error: a client-side exception has occurred'
+
+describe('Custom error page exception', () => {
+  it('should handle errors from _error render', async () => {
+    const { code } = await nextBuild(appDir)
+    const appPort = await findPort()
+    const app = await nextStart(appDir, appPort)
+    const browser = await webdriver(appPort, '/')
+    await browser.waitForElementByCss(navSel).elementByCss(navSel).click()
+    const text = await (await browser.elementByCss('#__next')).text()
+    killApp(app)
+
+    expect(code).toBe(0)
+    expect(text).toMatch(errorMessage)
+  })
+})