Merge branch 'canary' into 18398-on-loading-complete

.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 }}

azure-pipelines.yml

@@ -111,36 +111,37 @@ stages:
           - script: |
               node run-tests.js -g 1/1 --timings --azure --type unit
             displayName: 'Run tests'
-
-      - job: test_chrome_integration
-        pool:
-          vmImage: 'windows-2019'
-        strategy:
-          matrix:
-            nodejs-1:
-              group: 1/4
-            nodejs-2:
-              group: 2/4
-            nodejs-3:
-              group: 3/4
-            nodejs-4:
-              group: 4/4
-        steps:
-          - checkout: none
-          - script: |
-              wmic datafile where name="C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe" get Version /value
-            displayName: 'List Chrome version'
-          - task: NodeTool@0
-            inputs:
-              versionSpec: $(node_version)
-            displayName: 'Install Node.js'
-          - task: Cache@2
-            inputs:
-              # use deterministic cache key that is specific
-              # to this test run
-              key: $(Build.SourceVersion)
-              path: $(System.DefaultWorkingDirectory)
-            displayName: Cache Build
-          - script: |
-              node run-tests.js -g $(group) --timings --azure
-            displayName: 'Run tests'
+      # TODO: investigate re-enabling when stability matches running in
+      # tests in ubuntu environment
+      # - job: test_chrome_integration
+      #   pool:
+      #     vmImage: 'windows-2019'
+      #   strategy:
+      #     matrix:
+      #       nodejs-1:
+      #         group: 1/4
+      #       nodejs-2:
+      #         group: 2/4
+      #       nodejs-3:
+      #         group: 3/4
+      #       nodejs-4:
+      #         group: 4/4
+      #   steps:
+      #     - checkout: none
+      #     - script: |
+      #         wmic datafile where name="C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe" get Version /value
+      #       displayName: 'List Chrome version'
+      #     - task: NodeTool@0
+      #       inputs:
+      #         versionSpec: $(node_version)
+      #       displayName: 'Install Node.js'
+      #     - task: Cache@2
+      #       inputs:
+      #         # use deterministic cache key that is specific
+      #         # to this test run
+      #         key: $(Build.SourceVersion)
+      #         path: $(System.DefaultWorkingDirectory)
+      #       displayName: Cache Build
+      #     - script: |
+      #         node run-tests.js -g $(group) --timings --azure
+      #       displayName: 'Run tests'

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/image.tsx

@@ -459,8 +459,9 @@ export default function Image({
     ...(placeholder === 'blur'
       ? {
           filter: 'blur(20px)',
-          backgroundSize: 'cover',
+          backgroundSize: objectFit || 'cover',
           backgroundImage: `url("${blurDataURL}")`,
+          backgroundPosition: objectPosition || '0% 0%',
         }
       : undefined),
   }

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/server/next-server.ts

@@ -1447,7 +1447,6 @@ export default class Server {
   ): Promise<string | null> {
     const is404Page = pathname === '/404'
     const is500Page = pathname === '/500'
-    const isErrorPage = pathname === '/_error'
 
     const isLikeServerless =
       typeof components.Component === 'object' &&
@@ -1466,10 +1465,6 @@ export default class Server {
       res.statusCode = 404
     }
 
-    if (isErrorPage && res.statusCode === 200) {
-      res.statusCode = 404
-    }
-
     // ensure correct status is set when visiting a status page
     // directly e.g. /500
     if (STATIC_STATUS_PAGES.includes(pathname)) {

packages/next/shared/lib/constants.ts

@@ -17,7 +17,7 @@ export const SERVER_DIRECTORY = 'server'
 export const SERVERLESS_DIRECTORY = 'serverless'
 export const CONFIG_FILE = 'next.config.js'
 export const BUILD_ID_FILE = 'BUILD_ID'
-export const BLOCKED_PAGES = ['/_document', '/_app']
+export const BLOCKED_PAGES = ['/_document', '/_app', '/_error']
 export const CLIENT_PUBLIC_FILES_PATH = 'public'
 export const CLIENT_STATIC_FILES_PATH = 'static'
 export const CLIENT_STATIC_FILES_RUNTIME = 'runtime'

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/client-navigation/test/index.test.js

@@ -29,6 +29,7 @@ describe('Client Navigation', () => {
   afterAll(() => killApp(context.server))
 
   it('should not reload when visiting /_error directly', async () => {
+    const { status } = await fetchViaHTTP(context.appPort, '/_error')
     const browser = await webdriver(context.appPort, '/_error')
 
     await browser.eval('window.hello = true')
@@ -41,6 +42,7 @@ describe('Client Navigation', () => {
     }
     const html = await browser.eval('document.documentElement.innerHTML')
 
+    expect(status).toBe(404)
     expect(html).toContain('This page could not be found')
     expect(html).toContain('404')
   })

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,30 @@
+/* eslint-env jest */
+
+import { join } from 'path'
+import webdriver from 'next-webdriver'
+import { nextBuild, nextStart, findPort, killApp, check } from 'next-test-utils'
+
+jest.setTimeout(1000 * 60 * 1)
+
+const appDir = join(__dirname, '..')
+let appPort
+let app
+
+describe('Custom error page exception', () => {
+  beforeAll(async () => {
+    await nextBuild(appDir)
+    appPort = await findPort()
+    app = await nextStart(appDir, appPort)
+  })
+  afterAll(() => killApp(app))
+  it('should handle errors from _error render', async () => {
+    const navSel = '#nav'
+    const browser = await webdriver(appPort, '/')
+    await browser.waitForElementByCss(navSel).elementByCss(navSel).click()
+
+    await check(
+      () => browser.eval('document.documentElement.innerHTML'),
+      /Application error: a client-side exception has occurred/
+    )
+  })
+})

test/integration/fallback-modules/test/index.test.js

@@ -44,14 +44,14 @@ describe('Build Output', () => {
       const indexSize = parsePageSize('/')
       const indexFirstLoad = parsePageFirstLoad('/')
 
-      expect(parseFloat(indexSize)).toBeLessThanOrEqual(3.1)
-      expect(parseFloat(indexSize)).toBeGreaterThanOrEqual(2)
+      // expect(parseFloat(indexSize)).toBeLessThanOrEqual(3.1)
+      // expect(parseFloat(indexSize)).toBeGreaterThanOrEqual(2)
       expect(indexSize.endsWith('kB')).toBe(true)
 
-      expect(parseFloat(indexFirstLoad)).toBeLessThanOrEqual(
-        process.env.NEXT_PRIVATE_TEST_WEBPACK4_MODE ? 68.1 : 67.9
-      )
-      expect(parseFloat(indexFirstLoad)).toBeGreaterThanOrEqual(60)
+      // expect(parseFloat(indexFirstLoad)).toBeLessThanOrEqual(
+      //   process.env.NEXT_PRIVATE_TEST_WEBPACK4_MODE ? 68.1 : 67.9
+      // )
+      // expect(parseFloat(indexFirstLoad)).toBeGreaterThanOrEqual(60)
       expect(indexFirstLoad.endsWith('kB')).toBe(true)
     })
   })