Merge branch 'canary' into examples/with-msw-0.21.0

docs/api-reference/next.config.js/runtime-configuration.md

@@ -4,7 +4,7 @@ description: Add client and server runtime configuration to your Next.js app.
 
 # Runtime Configuration
 
-> Generally you'll want to use [build-time environment variables](/docs/api-reference/next.config.js/environment-variables.md) to provide your configuration. The reason for this is that runtime configuration adds rendering / initialization overhead and is incompatible with [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md).
+> Generally you'll want to use [build-time environment variables](/docs/basic-features/environment-variables.md) to provide your configuration. The reason for this is that runtime configuration adds rendering / initialization overhead and is incompatible with [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md).
 
 To add runtime configuration to your app open `next.config.js` and add the `publicRuntimeConfig` and `serverRuntimeConfig` configs:
 

examples/with-zeit-fetch/package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "@zeit/fetch": "5.1.1",
     "next": "latest",
-    "node-fetch": "2.6.0",
+    "node-fetch": "2.6.1",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "unfetch": "4.1.0"

lerna.json

@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "9.5.4-canary.11"
+  "version": "9.5.4-canary.12"
 }

package.json

@@ -92,7 +92,7 @@
     "lost": "8.3.1",
     "minimatch": "3.0.4",
     "moment": "^2.24.0",
-    "node-fetch": "2.6.0",
+    "node-fetch": "2.6.1",
     "node-notifier": "5.4.0",
     "node-sass": "4.12.0",
     "npm-run-all": "4.1.5",

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "9.5.4-canary.11",
+  "version": "9.5.4-canary.12",
   "keywords": [
     "react",
     "next",

packages/eslint-plugin-next/package.json

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

packages/next-codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "9.5.4-canary.11",
+  "version": "9.5.4-canary.12",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",

packages/next-mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "9.5.4-canary.11",
+  "version": "9.5.4-canary.12",
   "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.4-canary.11",
+  "version": "9.5.4-canary.12",
   "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.4-canary.11",
+  "version": "9.5.4-canary.12",
   "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.4-canary.11",
+  "version": "9.5.4-canary.12",
   "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.4-canary.11",
+  "version": "9.5.4-canary.12",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",

packages/next/build/babel/preset.ts

@@ -181,8 +181,6 @@ module.exports = (
           removeImport: true,
         },
       ],
-      require('@babel/plugin-proposal-optional-chaining'),
-      require('@babel/plugin-proposal-nullish-coalescing-operator'),
       isServer && require('@babel/plugin-syntax-bigint'),
       // Always compile numeric separator because the resulting number is
       // smaller.

packages/next/build/webpack/config/blocks/css/index.ts

@@ -28,7 +28,11 @@ export const css = curry(async function css(
   ctx: ConfigurationContext,
   config: Configuration
 ) {
-  const { prependData: sassPrependData, ...sassOptions } = ctx.sassOptions
+  const {
+    prependData: sassPrependData,
+    additionalData: sassAdditionalData,
+    ...sassOptions
+  } = ctx.sassOptions
 
   const sassPreprocessors: webpack.RuleSetUseItem[] = [
     // First, process files with `sass-loader`: this inlines content, and
@@ -40,7 +44,7 @@ export const css = curry(async function css(
         // files original to their source directory.
         sourceMap: true,
         sassOptions,
-        prependData: sassPrependData,
+        additionalData: sassPrependData || sassAdditionalData,
       },
     },
     // Then, `sass-loader` will have passed-through CSS imports as-is instead

packages/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "9.5.4-canary.11",
+  "version": "9.5.4-canary.12",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -63,10 +63,8 @@
     "@babel/core": "7.7.7",
     "@babel/plugin-proposal-class-properties": "7.10.4",
     "@babel/plugin-proposal-export-namespace-from": "7.10.4",
-    "@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.10.4",
@@ -77,15 +75,15 @@
     "@babel/preset-typescript": "7.10.4",
     "@babel/runtime": "7.11.2",
     "@babel/types": "7.11.5",
-    "@next/react-dev-overlay": "9.5.4-canary.11",
-    "@next/react-refresh-utils": "9.5.4-canary.11",
+    "@next/react-dev-overlay": "9.5.4-canary.12",
+    "@next/react-refresh-utils": "9.5.4-canary.12",
     "ast-types": "0.13.2",
     "babel-plugin-syntax-jsx": "6.18.0",
     "babel-plugin-transform-define": "2.0.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "browserslist": "4.13.0",
     "buffer": "5.6.0",
-    "cacache": "13.0.1",
+    "cacache": "15.0.5",
     "caniuse-lite": "^1.0.30001113",
     "chokidar": "2.1.8",
     "crypto-browserify": "3.12.0",
@@ -106,15 +104,15 @@
     "react-is": "16.13.1",
     "react-refresh": "0.8.3",
     "resolve-url-loader": "3.1.1",
-    "sass-loader": "8.0.2",
-    "schema-utils": "2.6.6",
+    "sass-loader": "10.0.2",
+    "schema-utils": "2.7.1",
     "stream-browserify": "3.0.0",
     "style-loader": "1.2.1",
     "styled-jsx": "3.3.0",
     "use-subscription": "1.4.1",
     "vm-browserify": "1.1.2",
     "watchpack": "2.0.0-beta.13",
-    "web-vitals": "0.2.1",
+    "web-vitals": "0.2.4",
     "webpack": "4.44.1",
     "webpack-sources": "1.4.3"
   },
@@ -123,7 +121,7 @@
     "react-dom": "^16.6.0"
   },
   "devDependencies": {
-    "@next/polyfill-nomodule": "9.5.4-canary.11",
+    "@next/polyfill-nomodule": "9.5.4-canary.12",
     "@taskr/clear": "1.1.0",
     "@taskr/esnext": "1.1.0",
     "@taskr/watch": "1.1.0",
@@ -194,7 +192,7 @@
     "lodash.curry": "4.1.1",
     "lru-cache": "5.1.1",
     "nanoid": "2.0.3",
-    "node-fetch": "2.6.0",
+    "node-fetch": "2.6.1",
     "ora": "4.0.4",
     "path-to-regexp": "6.1.0",
     "postcss-flexbugs-fixes": "4.2.1",

packages/next/taskfile-babel.js

@@ -62,8 +62,6 @@ const babelServerOpts = {
     ],
   ],
   plugins: [
-    '@babel/plugin-proposal-optional-chaining',
-    '@babel/plugin-proposal-nullish-coalescing-operator',
     'babel-plugin-dynamic-import-node',
     ['@babel/plugin-proposal-class-properties', { loose: true }],
   ],

packages/react-dev-overlay/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/react-dev-overlay",
-  "version": "9.5.4-canary.11",
+  "version": "9.5.4-canary.12",
   "description": "A development-only overlay for developing React applications.",
   "repository": {
     "url": "vercel/next.js",

packages/react-refresh-utils/package.json

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

test/integration/client-navigation/test/index.test.js

@@ -1362,6 +1362,7 @@ describe('Client Navigation', () => {
 
   renderingSuite(
     (p, q) => renderViaHTTP(context.appPort, p, q),
-    (p, q) => fetchViaHTTP(context.appPort, p, q)
+    (p, q) => fetchViaHTTP(context.appPort, p, q),
+    context
   )
 })

test/integration/client-navigation/test/rendering.js

@@ -1,11 +1,13 @@
 /* eslint-env jest */
 
 import cheerio from 'cheerio'
+import { getRedboxHeader, hasRedbox } from 'next-test-utils'
+import webdriver from 'next-webdriver'
 import { BUILD_MANIFEST, REACT_LOADABLE_MANIFEST } from 'next/constants'
 import { join } from 'path'
 import url from 'url'
 
-export default function (render, fetch) {
+export default function (render, fetch, ctx) {
   async function get$(path, query) {
     const html = await render(path, query)
     return cheerio.load(html)
@@ -215,30 +217,37 @@ export default function (render, fetch) {
     })
 
     test('getInitialProps circular structure', async () => {
-      const $ = await get$('/circular-json-error')
+      const browser = await webdriver(ctx.appPort, '/circular-json-error')
       const expectedErrorMessage =
-        'Circular structure in \\"getInitialProps\\" result of page \\"/circular-json-error\\".'
-      expect(
-        $('#__NEXT_DATA__').text().includes(expectedErrorMessage)
-      ).toBeTruthy()
+        'Circular structure in "getInitialProps" result of page "/circular-json-error".'
+
+      await hasRedbox(browser)
+      const text = await getRedboxHeader(browser)
+      expect(text).toContain(expectedErrorMessage)
     })
 
     test('getInitialProps should be class method', async () => {
-      const $ = await get$('/instance-get-initial-props')
+      const browser = await webdriver(
+        ctx.appPort,
+        '/instance-get-initial-props'
+      )
+
       const expectedErrorMessage =
-        '\\"InstanceInitialPropsPage.getInitialProps()\\" is defined as an instance method - visit https://err.sh/vercel/next.js/get-initial-props-as-an-instance-method for more information.'
-      expect(
-        $('#__NEXT_DATA__').text().includes(expectedErrorMessage)
-      ).toBeTruthy()
+        '"InstanceInitialPropsPage.getInitialProps()" is defined as an instance method - visit https://err.sh/vercel/next.js/get-initial-props-as-an-instance-method for more information.'
+
+      await hasRedbox(browser)
+      const text = await getRedboxHeader(browser)
+      expect(text).toContain(expectedErrorMessage)
     })
 
     test('getInitialProps resolves to null', async () => {
-      const $ = await get$('/empty-get-initial-props')
+      const browser = await webdriver(ctx.appPort, '/empty-get-initial-props')
       const expectedErrorMessage =
-        '\\"EmptyInitialPropsPage.getInitialProps()\\" should resolve to an object. But found \\"null\\" instead.'
-      expect(
-        $('#__NEXT_DATA__').text().includes(expectedErrorMessage)
-      ).toBeTruthy()
+        '"EmptyInitialPropsPage.getInitialProps()" should resolve to an object. But found "null" instead.'
+
+      await hasRedbox(browser)
+      const text = await getRedboxHeader(browser)
+      expect(text).toContain(expectedErrorMessage)
     })
 
     test('default Content-Type', async () => {
@@ -271,20 +280,25 @@ export default function (render, fetch) {
     })
 
     test('default export is not a React Component', async () => {
-      const $ = await get$('/no-default-export')
-      const pre = $('#__NEXT_DATA__')
-      expect(pre.text()).toMatch(/The default export is not a React Component/)
+      const browser = await webdriver(ctx.appPort, '/no-default-export')
+      await hasRedbox(browser)
+      const text = await getRedboxHeader(browser)
+      expect(text).toMatch(/The default export is not a React Component/)
     })
 
     test('error-inside-page', async () => {
-      const $ = await get$('/error-inside-page')
-      expect($('#__NEXT_DATA__').text()).toMatch(/This is an expected error/)
+      const browser = await webdriver(ctx.appPort, '/error-inside-page')
+      await hasRedbox(browser)
+      const text = await getRedboxHeader(browser)
+      expect(text).toMatch(/This is an expected error/)
       // Sourcemaps are applied by react-error-overlay, so we can't check them on SSR.
     })
 
     test('error-in-the-global-scope', async () => {
-      const $ = await get$('/error-in-the-global-scope')
-      expect($('#__NEXT_DATA__').text()).toMatch(/aa is not defined/)
+      const browser = await webdriver(ctx.appPort, '/error-in-the-global-scope')
+      await hasRedbox(browser)
+      const text = await getRedboxHeader(browser)
+      expect(text).toMatch(/aa is not defined/)
       // Sourcemaps are applied by react-error-overlay, so we can't check them on SSR.
     })
 
@@ -394,8 +408,11 @@ export default function (render, fetch) {
     })
 
     it('should show a valid error when undefined is thrown', async () => {
-      const $ = await get$('/throw-undefined')
-      expect($('body').text()).toMatch(
+      const browser = await webdriver(ctx.appPort, '/throw-undefined')
+      await hasRedbox(browser)
+      const text = await getRedboxHeader(browser)
+
+      expect(text).toContain(
         'An undefined error was thrown sometime during render...'
       )
     })