From 024d1e7a4f95d9df1f89f4b3e2d140280abfe145 Mon Sep 17 00:00:00 2001
From: Jarda Snajdr <jsnajdr@gmail.com>
Date: Tue, 31 Mar 2026 13:53:26 +0200
Subject: [PATCH] Externalize react-dom/client

---
 .../lib/util.js                               |  4 +++
 .../test/util.js                              | 28 +++++++++++++++++++
 .../lib/wordpress-externals-plugin.mjs        |  4 +++
 3 files changed, 36 insertions(+)

diff --git a/packages/dependency-extraction-webpack-plugin/lib/util.js b/packages/dependency-extraction-webpack-plugin/lib/util.js
index 11211cf0f2ef9d..06cfefadfe3551 100644
--- a/packages/dependency-extraction-webpack-plugin/lib/util.js
+++ b/packages/dependency-extraction-webpack-plugin/lib/util.js
@@ -41,6 +41,7 @@ function defaultRequestToExternal( request ) {
 			return 'React';
 
 		case 'react-dom':
+		case 'react-dom/client':
 			return 'ReactDOM';
 
 		case 'react/jsx-runtime':
@@ -123,6 +124,9 @@ function defaultRequestToHandle( request ) {
 		case 'lodash-es':
 			return 'lodash';
 
+		case 'react-dom/client':
+			return 'react-dom';
+
 		case 'react/jsx-runtime':
 			return 'react-jsx-runtime';
 	}
diff --git a/packages/dependency-extraction-webpack-plugin/test/util.js b/packages/dependency-extraction-webpack-plugin/test/util.js
index 392b3b282fc46b..05e47b87ccb496 100644
--- a/packages/dependency-extraction-webpack-plugin/test/util.js
+++ b/packages/dependency-extraction-webpack-plugin/test/util.js
@@ -47,6 +47,20 @@ describe( 'defaultRequestToExternal', () => {
 			defaultRequestToExternal( '@wordpress/some-future-package' )
 		).toEqual( [ 'wp', 'someFuturePackage' ] );
 	} );
+
+	test( 'Handles react request', () => {
+		expect( defaultRequestToExternal( 'react' ) ).toBe( 'React' );
+	} );
+
+	test( 'Handles react-dom request', () => {
+		expect( defaultRequestToExternal( 'react-dom' ) ).toBe( 'ReactDOM' );
+	} );
+
+	test( 'Handles react-dom/client request', () => {
+		expect( defaultRequestToExternal( 'react-dom/client' ) ).toBe(
+			'ReactDOM'
+		);
+	} );
 } );
 
 describe( 'defaultRequestToHandle', () => {
@@ -63,4 +77,18 @@ describe( 'defaultRequestToHandle', () => {
 			defaultRequestToHandle( '@wordpress/some-future-package' )
 		).toBe( 'wp-some-future-package' );
 	} );
+
+	test( 'Handles react request', () => {
+		expect( defaultRequestToHandle( 'react' ) ).toBeUndefined();
+	} );
+
+	test( 'Handles react-dom request', () => {
+		expect( defaultRequestToHandle( 'react-dom' ) ).toBeUndefined();
+	} );
+
+	test( 'Handles react-dom/client request', () => {
+		expect( defaultRequestToHandle( 'react-dom/client' ) ).toBe(
+			'react-dom'
+		);
+	} );
 } );
diff --git a/packages/wp-build/lib/wordpress-externals-plugin.mjs b/packages/wp-build/lib/wordpress-externals-plugin.mjs
index 281749e185b3ec..2b7e01a66f60b0 100644
--- a/packages/wp-build/lib/wordpress-externals-plugin.mjs
+++ b/packages/wp-build/lib/wordpress-externals-plugin.mjs
@@ -125,6 +125,10 @@ export function createWordpressExternalsPlugin(
 				const vendorExternals = {
 					react: { global: 'React', handle: 'react' },
 					'react-dom': { global: 'ReactDOM', handle: 'react-dom' },
+					'react-dom/client': {
+						global: 'ReactDOM',
+						handle: 'react-dom',
+					},
 					'react/jsx-runtime': {
 						global: 'ReactJSXRuntime',
 						handle: 'react-jsx-runtime',