Externalize react-dom/client

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';
 	}

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'
+		);
+	} );
 } );

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',