Update the monorepo to use React 19 (#53882)

We'll still need to maintain compatibility with React 18 until we drop
support for WordPress Core versions that still supply it, but we can
start developing against 19 now.

To help people avoid letting their AIs break compatibility with React 18
once they see we're building against React 19, let's add CI test runs
with React 18.

We'll remove these when we drop support for WordPress Core versions that
ship React 18.

---------

Co-authored-by: tbradsha <32492176+tbradsha@users.noreply.github.com>

Author: anomiex

.github/files/generate-ci-matrix.php

@@ -51,6 +51,9 @@
 	// {string} A valid artifact name for any generated artifacts. If not given, will be derived from the name.
 	'artifact'            => null,
 
+	// (int|null) React version to test with.
+	'with-react-version'  => null,
+
 	// {bool} Whether to install WooCommerce.
 	'with-woocommerce'    => false,
 
@@ -148,6 +151,16 @@
 	);
 }
 
+// Add JS React 18 test during the React 19 migration.
+// @todo Remove this when we drop support for WordPress Core versions containing React 18.
+$to_split[] = array(
+	'name'               => 'JS tests (React 18, %s)',
+	'script'             => 'test-js',
+	'timeout'            => 15, // 2026-10-06: Successful runs seem to take 3-7 minutes.
+	'with-react-version' => 18,
+	'split_config'       => $js_split_config,
+);
+
 /*
  * Split jobs: one job for each group in `split_config.groups`, then `split_config.generic` jobs to round-robin everything else.
  * Groups are keyed by job name, with a project slug or an array of slugs as the value.

.github/workflows/tests.yml

@@ -55,6 +55,7 @@ jobs:
       MONOREPO_BASE: ${{ github.workspace }}
       WITH_WOOCOMMERCE: ${{ matrix.with-woocommerce }}
       WITH_WPCOMSH: ${{ matrix.with-wpcomsh }}
+      WITH_REACT_VERSION: ${{ matrix.with-react-version }}
       COVERAGE: ${{ matrix.coverage }}
       SPLIT_NUM: ${{ matrix.split-num }}
       SPLIT_TOTAL: ${{ matrix.split-total }}
@@ -93,9 +94,17 @@ jobs:
 
       - name: Monorepo install
         run: |
-          echo "::group::Pnpm"
-          pnpm install
-          echo "::endgroup::"
+          if [[ "$WITH_REACT_VERSION" =~ ^[0-9]+$ ]]; then
+            echo "Overriding React version to $WITH_REACT_VERSION"
+            sed -i -e 's/^const withReactVersion = undefined;$/const withReactVersion = '"$WITH_REACT_VERSION"';/' .pnpmfile.cjs
+            echo "::group::Pnpm update"
+            pnpm update -r "react@^$WITH_REACT_VERSION" "react-dom@^$WITH_REACT_VERSION"
+            echo "::endgroup::"
+          else
+            echo "::group::Pnpm"
+            pnpm install
+            echo "::endgroup::"
+          fi
 
       - name: Detect changed projects
         id: changed

.pnpmfile.cjs

@@ -1,3 +1,6 @@
+// CI hack. If you want to run tests against React 18 locally, you could set it to 18 and then run `pnpm dedupe` (just don't commit that change, or the resulting lockfile changes).
+const withReactVersion = undefined;
+
 /**
  * Fix package dependencies.
  *
@@ -135,7 +138,7 @@ async function fixDeps( pkg ) {
 	// Currently @types/wordpress__block-editor is the only one still in use; see also https://github.com/WordPress/gutenberg/issues/67691
 	if ( pkg.name.startsWith( '@types/wordpress__' ) && pkg.dependencies ) {
 		for ( const k of Object.keys( pkg.dependencies ) ) {
-			if ( k.startsWith( '@wordpress/' ) ) {
+			if ( k.startsWith( '@wordpress/' ) || k === '@types/react' ) {
 				pkg.dependencies[ k ] = '*';
 			}
 		}
@@ -180,6 +183,26 @@ async function fixDeps( pkg ) {
  * @return {object} Modified pkg.
  */
 function fixPeerDeps( pkg ) {
+	// Deps that still depend on React <19.
+	const reactOldPkgs = new Set( [
+		// Still on 18.
+		'@woocommerce/email-editor', // direct dep from plugins/jetpack
+	] );
+	if ( reactOldPkgs.has( pkg.name ) ) {
+		for ( const p of [ 'react', 'react-dom' ] ) {
+			if ( ! pkg.peerDependencies?.[ p ] ) {
+				continue;
+			}
+
+			if (
+				pkg.peerDependencies[ p ].match( /(?:^|\|\|\s*)(?:\^18|18\.x)/ ) &&
+				! pkg.peerDependencies[ p ].match( /(?:^|\|\|\s*)(?:\^19|19\.x)/ )
+			) {
+				pkg.peerDependencies[ p ] += ' || ^19';
+			}
+		}
+	}
+
 	// Outdated eslint deps.
 	const eslintOldPkgs = new Set( [
 		'eslint-plugin-import', // https://github.com/import-js/eslint-plugin-import/issues/3227
@@ -261,6 +284,22 @@ async function readPackage( pkg, context ) {
 	if ( pkg.name ) {
 		pkg = await fixDeps( pkg, context );
 		pkg = fixPeerDeps( pkg, context );
+
+		// CI hack.
+		if ( withReactVersion ) {
+			for ( const field of [
+				'dependencies',
+				'devDependencies',
+				'optionalDependencies',
+				'peerDependencies',
+			] ) {
+				for ( const dep of [ 'react', 'react-dom' ] ) {
+					if ( pkg[ field ]?.[ dep ] ) {
+						pkg[ field ][ dep ] = '^' + withReactVersion;
+					}
+				}
+			}
+		}
 	}
 	return pkg;
 }
@@ -309,6 +348,20 @@ function afterAllResolved( lockfile ) {
 			);
 		}
 
+		// Now that we've moved to React 19, prevent React 18 from being re-installed.
+		if (
+			! withReactVersion &&
+			( k.startsWith( 'react@18.' ) ||
+				k.startsWith( 'react-dom@18.' ) ||
+				k.startsWith( '@types/react@18.' ) ||
+				k.startsWith( '@types/react-dom@18.' ) )
+		) {
+			throw new Error(
+				// prettier-ignore
+				`We've moved to React 19. Something you've done has tried to install \`${ k }\`, which would be likely to cause problems.`
+			);
+		}
+
 		// Forbid installing webpack without webpack-cli. It results in lots of spurious lockfile changes.
 		// https://github.com/pnpm/pnpm/issues/3935
 		if ( k.startsWith( 'webpack@' ) && ! v.optionalDependencies?.[ 'webpack-cli' ] ) {