Update repo to use react 18 by default (#35888)

This updates our `yarn next` command to leverage react v18 by default and removes the need for the test require hook/config modifying when testing react 18. There are some fixtures we need to investigate react 18 support in follow-ups:

- `test/integration/client-navigation-a11y`
- `test/integration/critical-css`
- `test/integration/custom-error-page-exception`
- `test/integration/font-optimization`
- AMP specific tests

package.json

@@ -36,7 +36,7 @@
     "lint-staged": "lint-staged",
     "next-with-deps": "./scripts/next-with-deps.sh",
     "next": "node --trace-deprecation --enable-source-maps packages/next/dist/bin/next",
-    "next-react-18": "node --trace-deprecation --enable-source-maps -r ./test/integration/react-18/test/require-hook.js packages/next/dist/bin/next",
+    "next-react-17": "node --trace-deprecation --enable-source-maps -r ./test/lib/react-17-require-hook.js packages/next/dist/bin/next",
     "next-no-sourcemaps": "node --trace-deprecation packages/next/dist/bin/next",
     "clean-trace-jaeger": "rm -rf test/integration/basic/.next && TRACE_TARGET=JAEGER node --trace-deprecation --enable-source-maps packages/next/dist/bin/next build test/integration/basic",
     "debug": "node --inspect packages/next/dist/bin/next",
@@ -53,7 +53,7 @@
     "@svgr/webpack": "5.5.0",
     "@swc/cli": "0.1.55",
     "@swc/core": "1.2.148",
-    "@testing-library/react": "11.2.5",
+    "@testing-library/react": "13.0.0",
     "@types/cheerio": "0.22.16",
     "@types/fs-extra": "8.1.0",
     "@types/html-validator": "5.0.2",
@@ -145,10 +145,10 @@
     "pretty-bytes": "5.3.0",
     "pretty-ms": "7.0.0",
     "random-seed": "0.3.0",
-    "react": "17.0.2",
-    "react-18": "npm:react@18.0.0",
-    "react-dom": "17.0.2",
-    "react-dom-18": "npm:react-dom@18.0.0",
+    "react": "18.0.0",
+    "react-17": "npm:react@17.0.2",
+    "react-dom": "18.0.0",
+    "react-dom-17": "npm:react-dom@17.0.2",
     "react-ssr-prepass": "1.0.8",
     "react-virtualized": "9.22.3",
     "relay-compiler": "13.0.2",

packages/next/build/entries.ts

@@ -128,7 +128,8 @@ const cachedPageRuntimeConfig = new Map<string, [number, PageRuntime]>()
 // could be thousands of pages existing.
 export async function getPageRuntime(
   pageFilePath: string,
-  nextConfig: Partial<NextConfig>
+  nextConfig: Partial<NextConfig>,
+  isDev?: boolean
 ): Promise<PageRuntime> {
   if (!nextConfig.experimental?.reactRoot) return undefined
 
@@ -144,7 +145,7 @@ export async function getPageRuntime(
       encoding: 'utf8',
     })
   } catch (err) {
-    if (process.env.NODE_ENV === 'production') throw err
+    if (!isDev) throw err
     return undefined
   }
 
@@ -235,7 +236,8 @@ export async function createEntrypoints(
   previewMode: __ApiPreviewProps,
   config: NextConfigComplete,
   loadedEnvFiles: LoadedEnvFiles,
-  pagesDir: string
+  pagesDir: string,
+  isDev?: boolean
 ): Promise<Entrypoints> {
   const client: webpack5.EntryObject = {}
   const server: webpack5.EntryObject = {}
@@ -291,7 +293,7 @@ export async function createEntrypoints(
       const pageFilePath = isInternalPages
         ? require.resolve(absolutePagePath)
         : join(pagesDir, absolutePagePath.replace(PAGES_DIR_ALIAS, ''))
-      const pageRuntime = await getPageRuntime(pageFilePath, config)
+      const pageRuntime = await getPageRuntime(pageFilePath, config, isDev)
       const isEdgeRuntime = pageRuntime === 'edge'
 
       if (page.match(MIDDLEWARE_ROUTE)) {

packages/next/build/index.ts

@@ -317,7 +317,8 @@ export default async function build(
           previewProps,
           config,
           loadedEnvFiles,
-          pagesDir
+          pagesDir,
+          false
         )
       )
     const pageKeys = Object.keys(mappedPages)

packages/next/server/dev/hot-reloader.ts

@@ -339,7 +339,8 @@ export default class HotReloader {
             this.previewProps,
             this.config,
             [],
-            this.pagesDir
+            this.pagesDir,
+            true
           )
         )
 
@@ -418,7 +419,8 @@ export default class HotReloader {
           this.previewProps,
           this.config,
           [],
-          this.pagesDir
+          this.pagesDir,
+          true
         )
       ).client,
       hasReactRoot: this.hasReactRoot,

test/development/basic/styled-components/next.config.js

@@ -1,17 +1,5 @@
-const path = require('path')
-
-let withReact18 = (config) => config
-
-try {
-  // only used when running inside of the monorepo not when isolated
-  withReact18 = require(path.join(
-    __dirname,
-    '../../../integration/react-18/test/with-react-18'
-  ))
-} catch (_) {}
-
-module.exports = withReact18({
+module.exports = {
   compiler: {
     styledComponents: true,
   },
-})
+}

test/integration/amphtml-custom-optimizer/next.config.js

@@ -1,4 +1,5 @@
-module.exports = {
+const path = require('path')
+module.exports = require(path.join(__dirname, '../../lib/with-react-17.js'))({
   experimental: {
     amp: {
       optimizer: {
@@ -9,4 +10,4 @@ module.exports = {
       skipValidation: true,
     },
   },
-}
+})

test/integration/amphtml-custom-optimizer/test/index.test.js

@@ -12,14 +12,19 @@ import {
 let app
 let appPort
 const appDir = join(__dirname, '../')
+const nodeArgs = ['-r', join(appDir, '../../lib/react-17-require-hook.js')]
 
 describe('AMP Custom Optimizer', () => {
   it('should build and start for static page', async () => {
-    const { code } = await nextBuild(appDir, undefined)
+    const { code } = await nextBuild(appDir, undefined, {
+      nodeArgs,
+    })
     expect(code).toBe(0)
 
     appPort = await findPort()
-    app = await nextStart(appDir, appPort)
+    app = await nextStart(appDir, appPort, {
+      nodeArgs,
+    })
 
     const html = await renderViaHTTP(appPort, '/')
     await killApp(app)
@@ -34,11 +39,11 @@ describe('AMP Custom Optimizer', () => {
   })
 
   it('should build and start for dynamic page', async () => {
-    const { code } = await nextBuild(appDir, undefined)
+    const { code } = await nextBuild(appDir, undefined, { nodeArgs })
     expect(code).toBe(0)
 
     appPort = await findPort()
-    app = await nextStart(appDir, appPort)
+    app = await nextStart(appDir, appPort, { nodeArgs })
 
     const html = await renderViaHTTP(appPort, '/dynamic')
     await killApp(app)

test/integration/amphtml-fragment-style/next.config.js

@@ -0,0 +1,2 @@
+const path = require('path')
+module.exports = require(path.join(__dirname, '../../lib/with-react-17.js'))({})

test/integration/amphtml-fragment-style/test/index.test.js

@@ -4,31 +4,29 @@ import { join } from 'path'
 import cheerio from 'cheerio'
 import { validateAMP } from 'amp-test-utils'
 import {
-  stopApp,
-  startApp,
   nextBuild,
-  nextServer,
   renderViaHTTP,
+  nextStart,
+  findPort,
+  killApp,
 } from 'next-test-utils'
 
 const appDir = join(__dirname, '../')
+const nodeArgs = ['-r', join(appDir, '../../lib/react-17-require-hook.js')]
 let appPort
-let server
 let app
 
 describe('AMP Fragment Styles', () => {
   beforeAll(async () => {
-    await nextBuild(appDir)
-    app = nextServer({
-      dir: join(__dirname, '../'),
-      dev: false,
-      quiet: true,
+    await nextBuild(appDir, [], {
+      nodeArgs,
+    })
+    appPort = await findPort()
+    app = await nextStart(appDir, appPort, {
+      nodeArgs,
     })
-
-    server = await startApp(app)
-    appPort = server.address().port
   })
-  afterAll(() => stopApp(server))
+  afterAll(() => killApp(app))
 
   it('adds styles from fragment in AMP mode correctly', async () => {
     const html = await renderViaHTTP(appPort, '/', { amp: 1 })

test/integration/amphtml/next.config.js

@@ -1,4 +1,5 @@
-module.exports = {
+const path = require('path')
+module.exports = require(path.join(__dirname, '../../lib/with-react-17.js'))({
   onDemandEntries: {
     // Make sure entries are not getting disposed.
     maxInactiveAge: 1000 * 60 * 60,
@@ -7,4 +8,4 @@ module.exports = {
     canonicalBase: 'http://localhost:1234',
   },
   // edit here
-}
+})

test/integration/amphtml/test/index.test.js

@@ -10,18 +10,16 @@ import {
   killApp,
   launchApp,
   nextBuild,
-  nextServer,
+  nextStart,
   renderViaHTTP,
-  startApp,
-  stopApp,
   waitFor,
 } from 'next-test-utils'
 import webdriver from 'next-webdriver'
 import { join } from 'path'
 
 const appDir = join(__dirname, '../')
+const nodeArgs = ['-r', join(appDir, '../../lib/react-17-require-hook.js')]
 let appPort
-let server
 let app
 
 const context = {}
@@ -38,24 +36,21 @@ describe('AMP Usage', () => {
       const result = await nextBuild(appDir, undefined, {
         stdout: true,
         stderr: true,
+        nodeArgs,
       })
       output = result.stdout + result.stderr
 
-      app = nextServer({
-        dir: join(__dirname, '../'),
-        dev: false,
-        quiet: true,
+      appPort = context.appPort = await findPort()
+      app = await nextStart(appDir, context.appPort, {
+        nodeArgs,
       })
-
-      server = await startApp(app)
-      context.appPort = appPort = server.address().port
     })
     afterAll(async () => {
       await rename(
         join(appDir, 'pages/invalid-amp.js.bak'),
         join(appDir, 'pages/invalid-amp.js')
       )
-      return stopApp(server)
+      return killApp(app)
     })
 
     it('should have amp optimizer in trace', async () => {
@@ -281,6 +276,7 @@ describe('AMP Usage', () => {
         onStderr(msg) {
           inspectPayload += msg
         },
+        nodeArgs,
       })
 
       await renderViaHTTP(dynamicAppPort, '/only-amp')
@@ -305,6 +301,7 @@ describe('AMP Usage', () => {
         onStderr(msg) {
           output += msg
         },
+        nodeArgs,
       })
     })
 
@@ -552,6 +549,7 @@ describe('AMP Usage', () => {
         onStderr(msg) {
           inspectPayload += msg
         },
+        nodeArgs,
       })
 
       await renderViaHTTP(dynamicAppPort, '/invalid-amp')

test/integration/app-document/next.config.js

@@ -1,3 +1,4 @@
-module.exports = {
+const path = require('path')
+module.exports = require(path.join(__dirname, '../../lib/with-react-17.js'))({
   crossOrigin: 'anonymous',
-}
+})

test/integration/app-document/test/index.test.js

@@ -28,6 +28,10 @@ describe('Document and App', () => {
     context.server = await launchApp(join(__dirname, '../'), context.appPort, {
       onStdout: collectOutput,
       onStderr: collectOutput,
+      nodeArgs: [
+        '-r',
+        join(__dirname, '../../../lib/react-17-require-hook.js'),
+      ],
     })
 
     // pre-build all pages at the start

test/integration/build-trace-extra-entries/app/next.config.js

@@ -1,4 +1,5 @@
 const path = require('path')
+let handledServer = false
 
 module.exports = {
   webpack(cfg, { isServer }) {
@@ -7,7 +8,8 @@ module.exports = {
     cfg.entry = async () => {
       const origEntries = await origEntry()
 
-      if (isServer) {
+      if (isServer && !handledServer) {
+        handledServer = true
         const curEntry = origEntries['pages/_app']
         origEntries['pages/_app'] = [
           path.join(__dirname, 'lib/get-data.js'),

test/integration/client-navigation-a11y/next.config.js

@@ -1 +1,2 @@
-module.exports = {}
+const path = require('path')
+module.exports = require(path.join(__dirname, '../../lib/with-react-17.js'))({})

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

@@ -11,6 +11,7 @@ import { join } from 'path'
 
 const context = {}
 const appDir = join(__dirname, '../')
+const nodeArgs = ['-r', join(appDir, '../../lib/react-17-require-hook.js')]
 
 const navigateTo = async (browser, selector) =>
   await browser
@@ -31,6 +32,7 @@ describe('Client Navigation accessibility', () => {
     context.appPort = await findPort()
     context.server = await launchApp(appDir, context.appPort, {
       env: { __NEXT_TEST_WITH_DEVTOOL: 1 },
+      nodeArgs,
     })
 
     const prerender = [

test/integration/critical-css/next.config.js

@@ -0,0 +1 @@
+module.exports = { experimental: { optimizeCss: true } }

test/integration/critical-css/test/index.test.js

@@ -14,6 +14,7 @@ import fs from 'fs-extra'
 const glob = promisify(globOrigig)
 const appDir = join(__dirname, '../')
 const nextConfig = join(appDir, 'next.config.js')
+const nodeArgs = ['-r', join(appDir, '../../lib/react-17-require-hook.js')]
 let appPort
 let app
 
@@ -67,9 +68,13 @@ describe('CSS optimization for SSR apps', () => {
     if (fs.pathExistsSync(join(appDir, '.next'))) {
       await fs.remove(join(appDir, '.next'))
     }
-    await nextBuild(appDir)
+    await nextBuild(appDir, undefined, {
+      nodeArgs,
+    })
     appPort = await findPort()
-    app = await nextStart(appDir, appPort)
+    app = await nextStart(appDir, appPort, {
+      nodeArgs,
+    })
   })
   afterAll(async () => {
     await killApp(app)
@@ -85,9 +90,13 @@ describe('Font optimization for emulated serverless apps', () => {
       `module.exports = { target: 'experimental-serverless-trace', experimental: {optimizeCss: true} }`,
       'utf8'
     )
-    await nextBuild(appDir)
+    await nextBuild(appDir, undefined, {
+      nodeArgs,
+    })
     appPort = await findPort()
-    app = await nextStart(appDir, appPort)
+    app = await nextStart(appDir, appPort, {
+      nodeArgs,
+    })
   })
   afterAll(async () => {
     await killApp(app)