Merge branch 'canary' into cms-builder-io-example

Author: teleaziz

.eslintrc.json

@@ -27,7 +27,10 @@
       "extends": ["plugin:jest/recommended"],
       "rules": {
         "jest/expect-expect": "off",
-        "jest/no-disabled-tests": "off"
+        "jest/no-disabled-tests": "off",
+        "jest/no-conditional-expect": "off",
+        "jest/valid-title": "off",
+        "jest/no-interpolation-in-snapshots": "off"
       }
     },
     { "files": ["**/__tests__/**"], "env": { "jest": true } },

.github/workflows/test_react_experimental.yml

@@ -29,9 +29,9 @@ jobs:
     # needs: build
     env:
       NEXT_TELEMETRY_DISABLED: 1
-      NEXT_PRIVATE_REACT_MODE: concurrent
       HEADLESS: true
       NEXT_PRIVATE_SKIP_SIZE_TESTS: true
+      NEXT_PRIVATE_REACT_ROOT: 1
     strategy:
       fail-fast: false
       matrix:

examples/api-routes-rest/README.md

@@ -18,6 +18,6 @@ npx create-next-app --example api-routes-rest api-routes-rest-app
 yarn create next-app --example api-routes-rest api-routes-rest-app
 ```
 
-### Deploy to Now
+### Deploy to Vercel
 
 Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

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

@@ -1,6 +1,6 @@
 import mongoose from 'mongoose'
 
-const { MONGODB_URI } = process.env
+const MONGODB_URI = process.env.MONGODB_URI
 
 if (!MONGODB_URI) {
   throw new Error(

package.json

@@ -49,8 +49,8 @@
     "@types/http-proxy": "1.17.3",
     "@types/jest": "24.0.13",
     "@types/string-hash": "1.1.1",
-    "@typescript-eslint/eslint-plugin": "2.17.0",
-    "@typescript-eslint/parser": "2.17.0",
+    "@typescript-eslint/eslint-plugin": "4.22.0",
+    "@typescript-eslint/parser": "4.22.0",
     "@zeit/next-css": "1.0.2-canary.2",
     "@zeit/next-sass": "1.0.2-canary.2",
     "@zeit/next-typescript": "1.1.2-canary.0",
@@ -71,11 +71,11 @@
     "cross-env": "6.0.3",
     "cross-spawn": "6.0.5",
     "escape-string-regexp": "2.0.0",
-    "eslint": "6.8.0",
-    "eslint-plugin-import": "2.20.2",
-    "eslint-plugin-jest": "23.13.1",
-    "eslint-plugin-react": "7.19.0",
-    "eslint-plugin-react-hooks": "2.3.0",
+    "eslint": "7.24.0",
+    "eslint-plugin-import": "2.22.1",
+    "eslint-plugin-jest": "24.3.5",
+    "eslint-plugin-react": "7.23.2",
+    "eslint-plugin-react-hooks": "4.2.0",
     "execa": "2.0.3",
     "express": "4.17.0",
     "faunadb": "2.6.1",
@@ -87,7 +87,6 @@
     "image-size": "0.9.3",
     "is-animated": "2.0.0",
     "isomorphic-unfetch": "3.0.0",
-    "jest-cli": "27.0.0-next.5",
     "ky": "0.19.1",
     "ky-universal": "0.6.0",
     "lerna": "4.0.0",
@@ -129,7 +128,8 @@
     "wait-port": "0.2.2",
     "web-streams-polyfill": "2.1.1",
     "webpack-bundle-analyzer": "4.3.0",
-    "worker-loader": "3.0.7"
+    "worker-loader": "3.0.7",
+    "jest": "27.0.0-next.8"
   },
   "resolutions": {
     "browserslist": "4.16.1",

packages/next/build/output/index.ts

@@ -12,11 +12,6 @@ export function startedDevelopmentServer(appUrl: string, bindAddr: string) {
 let previousClient: import('webpack').Compiler | null = null
 let previousServer: import('webpack').Compiler | null = null
 
-type CompilerDiagnosticsWithFile = {
-  errors: { file: string | undefined; message: string }[] | null
-  warnings: { file: string | undefined; message: string }[] | null
-}
-
 type CompilerDiagnostics = {
   errors: string[] | null
   warnings: string[] | null
@@ -44,6 +39,8 @@ type BuildStatusStore = {
   amp: AmpPageStatus
 }
 
+// eslint typescript has a bug with TS enums
+/* eslint-disable no-shadow */
 enum WebpackStatusPhase {
   COMPILING = 1,
   COMPILED_WITH_ERRORS = 2,

packages/next/build/webpack-config.ts

@@ -596,7 +596,10 @@ export default async function getBaseWebpackConfig(
   async function handleExternals(
     context: string,
     request: string,
-    getResolve: () => (context: string, request: string) => Promise<string>
+    getResolve: () => (
+      resolveContext: string,
+      resolveRequest: string
+    ) => Promise<string>
   ) {
     if (request === 'next') {
       return `commonjs ${request}`
@@ -763,8 +766,8 @@ export default async function getBaseWebpackConfig(
                 context: string
                 request: string
                 getResolve: () => (
-                  context: string,
-                  request: string
+                  resolveContext: string,
+                  resolveRequest: string
                 ) => Promise<string>
               }) => handleExternals(context, request, getResolve)
             : (
@@ -1048,8 +1051,8 @@ export default async function getBaseWebpackConfig(
         'process.env.__NEXT_STRICT_MODE': JSON.stringify(
           config.reactStrictMode
         ),
-        'process.env.__NEXT_REACT_MODE': JSON.stringify(
-          config.experimental.reactMode
+        'process.env.__NEXT_REACT_ROOT': JSON.stringify(
+          config.experimental.reactRoot
         ),
         'process.env.__NEXT_OPTIMIZE_FONTS': JSON.stringify(
           config.optimizeFonts && !dev

packages/next/build/webpack/plugins/webpack-conformance-plugin/TestInterface.ts

@@ -6,6 +6,8 @@ export interface IConformanceAnomaly {
   stack_trace?: string
 }
 
+// eslint typescript has a bug with TS enums
+/* eslint-disable no-shadow */
 export enum IConformanceTestStatus {
   SUCCESS,
   FAILED,

packages/next/build/webpack/plugins/webpack-conformance-plugin/checks/granular-chunks-conformance.ts

@@ -1,3 +1,4 @@
+/* @eslint-disable no-redeclare */
 import chalk from 'chalk'
 import {
   CONFORMANCE_ERROR_PREFIX,
@@ -10,11 +11,6 @@ import {
 } from '../TestInterface'
 import { deepEqual } from '../utils/utils'
 
-export interface GranularChunksConformanceCheck
-  extends IWebpackConformanceTest {
-  granularChunksConfig: any
-}
-
 function getWarningMessage(modifiedProp: string) {
   return (
     `${CONFORMANCE_WARNING_PREFIX}: The splitChunks config has been carefully ` +
@@ -33,7 +29,9 @@ function getErrorMessage(message: string) {
   )
 }
 
-export class GranularChunksConformanceCheck {
+/* @eslint-disable-next-line no-redeclare */
+export class GranularChunksConformanceCheck implements IWebpackConformanceTest {
+  granularChunksConfig: any
   constructor(granularChunksConfig: any) {
     this.granularChunksConfig = granularChunksConfig
   }

packages/next/client/index.tsx

@@ -494,7 +494,8 @@ export function renderError(renderErrorProps: RenderErrorProps): Promise<any> {
 }
 
 let reactRoot: any = null
-let shouldUseHydrate: boolean = typeof ReactDOM.hydrate === 'function'
+let shouldHydrate: boolean = typeof ReactDOM.hydrate === 'function'
+
 function renderReactElement(
   domEl: HTMLElement,
   fn: (cb: () => void) => JSX.Element
@@ -504,24 +505,24 @@ function renderReactElement(
     performance.mark('beforeRender')
   }
 
-  const reactEl = fn(
-    shouldUseHydrate ? markHydrateComplete : markRenderComplete
-  )
-  if (process.env.__NEXT_REACT_MODE !== 'legacy') {
+  const reactEl = fn(shouldHydrate ? markHydrateComplete : markRenderComplete)
+  if (process.env.__NEXT_REACT_ROOT) {
     if (!reactRoot) {
-      const opts = { hydrate: shouldUseHydrate }
-      reactRoot =
-        process.env.__NEXT_REACT_MODE === 'concurrent'
-          ? (ReactDOM as any).unstable_createRoot(domEl, opts)
-          : (ReactDOM as any).unstable_createBlockingRoot(domEl, opts)
+      const createRootName =
+        typeof (ReactDOM as any).unstable_createRoot === 'function'
+          ? 'unstable_createRoot'
+          : 'createRoot'
+      reactRoot = (ReactDOM as any)[createRootName](domEl, {
+        hydrate: shouldHydrate,
+      })
     }
     reactRoot.render(reactEl)
-    shouldUseHydrate = false
+    shouldHydrate = false
   } else {
     // The check for `.hydrate` is there to support React alternatives like preact
-    if (shouldUseHydrate) {
+    if (shouldHydrate) {
       ReactDOM.hydrate(reactEl, domEl)
-      shouldUseHydrate = false
+      shouldHydrate = false
     } else {
       ReactDOM.render(reactEl, domEl)
     }