Merge branch 'canary' into fix/handle-hash-change-error

docs/basic-features/environment-variables.md

@@ -152,26 +152,14 @@ export default async () => {
 
 ## Environment Variable Load Order
 
-Depending on the environment (as set by `NODE_ENV`), Environment Variables are loaded from the following sources in top-to-bottom order. In all environments, the existing `env` is not overridden by following sources:
+Environment variables are looked up in the following places, in order, stopping once the variable is found.
 
-`NODE_ENV=production`
-
-1. `.env.production.local`
-1. `.env.local`
-1. `.env.production`
-1. `.env`
-
-`NODE_ENV=development`
-
-1. `.env.development.local`
-1. `.env.local`
-1. `.env.development`
+1. `process.env`
+1. `.env.$(NODE_ENV).local`
+1. `.env.local` (Not checked when `NODE_ENV` is `test`.)
+1. `.env.$(NODE_ENV)`
 1. `.env`
 
-`NODE_ENV=test`
-
-1. `.env.test.local`
-1. `.env.test`
-1. `.env`
+For example, if `NODE_ENV` is `development` and you define a variable in both `.env.development.local` and `.env`, the value in `.env.development.local` will be used.
 
-> **Note:** `.env.local` is not loaded when `NODE_ENV=test`.
+> **Note:** The allowed values for `NODE_ENV` are `production`, `development` and `test`.

lerna.json

@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "12.1.7-canary.6"
+  "version": "12.1.7-canary.7"
 }

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "12.1.7-canary.6",
+  "version": "12.1.7-canary.7",
   "keywords": [
     "react",
     "next",

packages/eslint-config-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "12.1.7-canary.6",
+  "version": "12.1.7-canary.7",
   "description": "ESLint configuration used by NextJS.",
   "main": "index.js",
   "license": "MIT",
@@ -9,7 +9,7 @@
     "directory": "packages/eslint-config-next"
   },
   "dependencies": {
-    "@next/eslint-plugin-next": "12.1.7-canary.6",
+    "@next/eslint-plugin-next": "12.1.7-canary.7",
     "@rushstack/eslint-patch": "^1.1.3",
     "@typescript-eslint/parser": "^5.21.0",
     "eslint-import-resolver-node": "^0.3.6",

packages/eslint-plugin-next/lib/rules/no-before-interactive-script-outside-document.js

@@ -31,7 +31,11 @@ module.exports = {
           (child) => child.name && child.name.name === 'strategy'
         )
 
-        if (!strategy || strategy?.value?.value !== 'beforeInteractive') {
+        if (
+          !strategy ||
+          !strategy.value ||
+          strategy.value.value !== 'beforeInteractive'
+        ) {
           return
         }
 

packages/eslint-plugin-next/package.json

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

packages/next-codemod/package.json

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

packages/next-env/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "12.1.7-canary.6",
+  "version": "12.1.7-canary.7",
   "keywords": [
     "react",
     "next",

packages/next-mdx/package.json

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

packages/next-plugin-storybook/package.json

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

packages/next-polyfill-module/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "12.1.7-canary.6",
+  "version": "12.1.7-canary.7",
   "description": "A standard library polyfill for ES Modules supporting browsers (Edge 16+, Firefox 60+, Chrome 61+, Safari 10.1+)",
   "main": "dist/polyfill-module.js",
   "license": "MIT",

packages/next-polyfill-nomodule/package.json

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

packages/next-swc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/swc",
-  "version": "12.1.7-canary.6",
+  "version": "12.1.7-canary.7",
   "private": true,
   "scripts": {
     "build-native": "napi build --platform --cargo-name next_swc_napi native",

packages/next/build/swc/options.js

@@ -192,6 +192,7 @@ export function getLoaderSWCOptions({
   hasReactRefresh,
   nextConfig,
   jsConfig,
+  supportedBrowsers,
   // This is not passed yet as "paths" resolving is handled by webpack currently.
   // resolvedBaseUrl,
 }) {
@@ -242,6 +243,13 @@ export function getLoaderSWCOptions({
       isServer,
       pagesDir,
       isPageFile,
+      ...(supportedBrowsers && supportedBrowsers.length > 0
+        ? {
+            env: {
+              targets: supportedBrowsers,
+            },
+          }
+        : {}),
     }
   }
 }

packages/next/build/webpack-config.ts

@@ -25,6 +25,7 @@ import {
   REACT_LOADABLE_MANIFEST,
   SERVERLESS_DIRECTORY,
   SERVER_DIRECTORY,
+  MODERN_BROWSERSLIST_TARGET,
 } from '../shared/lib/constants'
 import { execOnce } from '../shared/lib/utils'
 import { NextConfigComplete } from '../server/config-shared'
@@ -63,16 +64,31 @@ const watchOptions = Object.freeze({
 
 function getSupportedBrowsers(
   dir: string,
-  isDevelopment: boolean
+  isDevelopment: boolean,
+  config: NextConfigComplete
 ): string[] | undefined {
   let browsers: any
   try {
-    browsers = browserslist.loadConfig({
+    const browsersListConfig = browserslist.loadConfig({
       path: dir,
       env: isDevelopment ? 'development' : 'production',
     })
+    // Running `browserslist` resolves `extends` and other config features into a list of browsers
+    if (browsersListConfig && browsersListConfig.length > 0) {
+      browsers = browserslist(browsersListConfig)
+    }
   } catch {}
-  return browsers
+
+  // When user has browserslist use that target
+  if (browsers && browsers.length > 0) {
+    return browsers
+  }
+
+  // When user does not have browserslist use the default target
+  // When `experimental.legacyBrowsers: false` the modern default is used
+  return config.experimental.legacyBrowsers
+    ? undefined
+    : MODERN_BROWSERSLIST_TARGET
 }
 
 type ExcludesFalse = <T>(x: T | false) => x is T
@@ -339,7 +355,8 @@ export default async function getBaseWebpackConfig(
     dir,
     config
   )
-  const supportedBrowsers = await getSupportedBrowsers(dir, dev)
+  const supportedBrowsers = await getSupportedBrowsers(dir, dev, config)
+
   const hasRewrites =
     rewrites.beforeFiles.length > 0 ||
     rewrites.afterFiles.length > 0 ||
@@ -466,6 +483,9 @@ export default async function getBaseWebpackConfig(
             fileReading: config.experimental.swcFileReading,
             nextConfig: config,
             jsConfig,
+            supportedBrowsers: config.experimental.browsersListForSwc
+              ? supportedBrowsers
+              : undefined,
           },
         }
       : {
@@ -1783,6 +1803,7 @@ export default async function getBaseWebpackConfig(
     relay: config.compiler?.relay,
     emotion: config.experimental?.emotion,
     modularizeImports: config.experimental?.modularizeImports,
+    legacyBrowsers: config.experimental?.legacyBrowsers,
   })
 
   const cache: any = {

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

@@ -36,8 +36,14 @@ async function loaderTransform(parentTrace, source, inputSourceMap) {
 
   let loaderOptions = this.getOptions() || {}
 
-  const { isServer, pagesDir, hasReactRefresh, nextConfig, jsConfig } =
-    loaderOptions
+  const {
+    isServer,
+    pagesDir,
+    hasReactRefresh,
+    nextConfig,
+    jsConfig,
+    supportedBrowsers,
+  } = loaderOptions
   const isPageFile = filename.startsWith(pagesDir)
 
   const swcOptions = getLoaderSWCOptions({
@@ -49,6 +55,7 @@ async function loaderTransform(parentTrace, source, inputSourceMap) {
     hasReactRefresh,
     nextConfig,
     jsConfig,
+    supportedBrowsers,
   })
 
   const programmaticOptions = {

packages/next/build/webpack/plugins/middleware-plugin.ts

@@ -177,22 +177,20 @@ function getCodeAnalizer(params: {
 
     /**
      * A noop handler to skip analyzing some cases.
+     * Order matters: for it to work, it must be registered first
      */
-    const noop = () =>
+    const skip = () =>
       parser.state.module?.layer === 'middleware' ? true : undefined
 
-    hooks.call.for('eval').tap(NAME, handleWrapExpression)
-    hooks.call.for('global.eval').tap(NAME, handleWrapExpression)
-    hooks.call.for('Function').tap(NAME, handleWrapExpression)
-    hooks.call.for('global.Function').tap(NAME, handleWrapExpression)
-    hooks.new.for('Function').tap(NAME, handleWrapExpression)
-    hooks.new.for('global.Function').tap(NAME, handleWrapExpression)
-    hooks.expression.for('eval').tap(NAME, handleExpression)
-    hooks.expression.for('Function').tap(NAME, handleExpression)
-    hooks.expression.for('global.eval').tap(NAME, handleExpression)
-    hooks.expression.for('global.Function').tap(NAME, handleExpression)
-    hooks.expression.for('Function.prototype').tap(NAME, noop)
-    hooks.expression.for('global.Function.prototype').tap(NAME, noop)
+    for (const prefix of ['', 'global.']) {
+      hooks.expression.for(`${prefix}Function.prototype`).tap(NAME, skip)
+      hooks.expression.for(`${prefix}Function.bind`).tap(NAME, skip)
+      hooks.call.for(`${prefix}eval`).tap(NAME, handleWrapExpression)
+      hooks.call.for(`${prefix}Function`).tap(NAME, handleWrapExpression)
+      hooks.new.for(`${prefix}Function`).tap(NAME, handleWrapExpression)
+      hooks.expression.for(`${prefix}eval`).tap(NAME, handleExpression)
+      hooks.expression.for(`${prefix}Function`).tap(NAME, handleExpression)
+    }
     hooks.callMemberChain.for('process').tap(NAME, handleCallMemberChain)
     hooks.expressionMemberChain.for('process').tap(NAME, handleCallMemberChain)
   }