Automatically use createRoot for React@>=18 (#26279)

Also logs a message when defaulting, and a warning when using a prerelease build of `react-dom` (e.g. the React 18 alpha) which are not officially supported.

Note: I've done this in `webpack-config.ts` instead of the Next.js config, as we don't actually want you to be able to opt-out *without* downgrading back to React 17, and so it ought to be entirely removed from the config eventually.

packages/next/build/webpack-config.ts

@@ -3,6 +3,7 @@ import chalk from 'chalk'
 import crypto from 'crypto'
 import { readFileSync } from 'fs'
 import { codeFrameColumns } from 'next/dist/compiled/babel/code-frame'
+import semver from 'next/dist/compiled/semver'
 import { isWebpack5, webpack } from 'next/dist/compiled/webpack/webpack'
 import path, { join as pathJoin, relative as relativePath } from 'path'
 import {
@@ -12,6 +13,7 @@ import {
   PAGES_DIR_ALIAS,
 } from '../lib/constants'
 import { fileExists } from '../lib/file-exists'
+import { getPackageVersion } from '../lib/get-package-version'
 import { CustomRoutes } from '../lib/load-custom-routes.js'
 import { getTypeScriptConfiguration } from '../lib/typescript/getTypeScriptConfiguration'
 import {
@@ -230,6 +232,30 @@ export default async function getBaseWebpackConfig(
     rewrites.afterFiles.length > 0 ||
     rewrites.fallback.length > 0
   const hasReactRefresh: boolean = dev && !isServer
+  const reactDomVersion = await getPackageVersion({
+    cwd: dir,
+    name: 'react-dom',
+  })
+  const hasReact18: boolean =
+    Boolean(reactDomVersion) &&
+    (semver.gte(reactDomVersion!, '18.0.0') ||
+      semver.coerce(reactDomVersion)?.version === '18.0.0')
+  const hasReactPrerelease =
+    Boolean(reactDomVersion) && semver.prerelease(reactDomVersion!) != null
+  const hasReactRoot: boolean = config.experimental.reactRoot || hasReact18
+
+  // Only inform during one of the builds
+  if (!isServer) {
+    if (hasReactRoot) {
+      Log.info('Using the createRoot API for React')
+    }
+    if (hasReactPrerelease) {
+      Log.warn(
+        `You are using an unsupported prerelease of 'react-dom' which may cause ` +
+          `unexpected or broken application behavior. Continue at your own risk.`
+      )
+    }
+  }
 
   const babelConfigFile = await [
     '.babelrc',
@@ -1076,9 +1102,7 @@ export default async function getBaseWebpackConfig(
         'process.env.__NEXT_STRICT_MODE': JSON.stringify(
           config.reactStrictMode
         ),
-        'process.env.__NEXT_REACT_ROOT': JSON.stringify(
-          config.experimental.reactRoot
-        ),
+        'process.env.__NEXT_REACT_ROOT': JSON.stringify(hasReactRoot),
         'process.env.__NEXT_OPTIMIZE_FONTS': JSON.stringify(
           config.optimizeFonts && !dev
         ),

test/integration/react-18/prerelease/.gitignore

@@ -0,0 +1 @@
+!node_modules

test/integration/react-18/prerelease/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "react-dom": "*"
+  }
+}

test/integration/react-18/prerelease/pages/index.js

@@ -0,0 +1,3 @@
+export default function Index() {
+  return <p>Hello</p>
+}

test/integration/react-18/supported/pages/index.js

@@ -0,0 +1,3 @@
+export default function Index() {
+  return <p>Hello</p>
+}

test/integration/react-18/test/index.test.js

@@ -0,0 +1,70 @@
+/* eslint-env jest */
+
+import { findPort, killApp, launchApp, runNextCommand } from 'next-test-utils'
+import { join } from 'path'
+
+jest.setTimeout(1000 * 60 * 5)
+
+const dirSupported = join(__dirname, '../supported')
+const dirPrerelease = join(__dirname, '../prerelease')
+
+const UNSUPPORTED_PRERELEASE =
+  "You are using an unsupported prerelease of 'react-dom'"
+const USING_CREATE_ROOT = 'Using the createRoot API for React'
+
+async function getBuildOutput(dir) {
+  const { stdout, stderr } = await runNextCommand(['build', dir], {
+    stdout: true,
+    stderr: true,
+  })
+  return stdout + stderr
+}
+
+async function getDevOutput(dir) {
+  const port = await findPort()
+
+  let stdout = ''
+  let stderr = ''
+  let instance = await launchApp(dir, port, {
+    stdout: true,
+    stderr: true,
+    onStdout(msg) {
+      stdout += msg
+    },
+    onStderr(msg) {
+      stderr += msg
+    },
+  })
+  await killApp(instance)
+  return stdout + stderr
+}
+
+describe('React 18 Support', () => {
+  describe('build', () => {
+    test('supported version of React', async () => {
+      const output = await getBuildOutput(dirSupported)
+      expect(output).not.toMatch(USING_CREATE_ROOT)
+      expect(output).not.toMatch(UNSUPPORTED_PRERELEASE)
+    })
+
+    test('prerelease version of React', async () => {
+      const output = await getBuildOutput(dirPrerelease)
+      expect(output).toMatch(USING_CREATE_ROOT)
+      expect(output).toMatch(UNSUPPORTED_PRERELEASE)
+    })
+  })
+
+  describe('dev', () => {
+    test('supported version of React', async () => {
+      let output = await getDevOutput(dirSupported)
+      expect(output).not.toMatch(USING_CREATE_ROOT)
+      expect(output).not.toMatch(UNSUPPORTED_PRERELEASE)
+    })
+
+    test('prerelease version of React', async () => {
+      let output = await getDevOutput(dirPrerelease)
+      expect(output).toMatch(USING_CREATE_ROOT)
+      expect(output).toMatch(UNSUPPORTED_PRERELEASE)
+    })
+  })
+})