Assets: Add JSX runtime polyfill to prevent issues with React's automatic runtime being used to transform jsx

.pnpmfile.cjs

@@ -190,19 +190,6 @@ function afterAllResolved( lockfile ) {
 		return lockfile;
 	}
 
-	// eslint-disable-next-line no-unused-vars -- Don't care.
-	for ( const [ k, v ] of Object.entries( lockfile.packages ) ) {
-		// Forbid `@wordpress/dependency-extraction-webpack-plugin` v6 until WP 6.5 support is dropped.
-		// https://github.com/WordPress/gutenberg/issues/62202
-		if (
-			k.startsWith( '@wordpress/dependency-extraction-webpack-plugin@' ) &&
-			! k.startsWith( '@wordpress/dependency-extraction-webpack-plugin@5.' )
-		) {
-			throw new Error(
-				'@wordpress/dependency-extraction-webpack-plugin >= 6.0.0 is not allowed until we drop WordPress 6.5 support.\nSee https://github.com/WordPress/gutenberg/issues/62202 for details.'
-			);
-		}
-	}
 	return lockfile;
 }
 

projects/packages/assets/changelog/fix-jsx-runtime-react-19-polyfill

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Assets: Add JSX runtime polyfill here so that it applies to all relevant plugins in the monorepo, preventing site breakages when WP < 6.6 and packages are included that use React's automatic runtime to transform JSX.

projects/packages/assets/package.json

@@ -10,6 +10,9 @@
 		"test": "jest tests",
 		"validate": "pnpm exec validate-es build/"
 	},
+	"dependencies": {
+		"react": "18.3.1"
+	},
 	"devDependencies": {
 		"@automattic/jetpack-webpack-config": "workspace:*",
 		"@wordpress/browserslist-config": "6.2.0",

projects/packages/assets/src/class-assets.php

@@ -498,14 +498,16 @@ public static function wp_default_scripts_hook( $wp_scripts ) {
 
 		// Can't use self::register_script(), this action is called too early.
 		if ( file_exists( __DIR__ . '/../build/i18n-loader.asset.php' ) ) {
-			$path  = '../build/i18n-loader.js';
-			$asset = require __DIR__ . '/../build/i18n-loader.asset.php';
+			$path     = '../build/i18n-loader.js';
+			$asset    = require __DIR__ . '/../build/i18n-loader.asset.php';
+			$jsx_path = '../build/react-jsx-runtime.js';
 		} else {
-			$path  = 'js/i18n-loader.js';
-			$asset = array(
+			$path     = 'js/i18n-loader.js';
+			$asset    = array(
 				'dependencies' => array( 'wp-i18n' ),
 				'version'      => filemtime( __DIR__ . "/$path" ),
 			);
+			$jsx_path = 'js/react-jsx-runtime.js';
 		}
 		$url = self::normalize_path( plugins_url( $path, __FILE__ ) );
 		$url = add_query_arg( 'minify', 'true', $url );
@@ -529,6 +531,11 @@ public static function wp_default_scripts_hook( $wp_scripts ) {
 		$wp_scripts->add( 'wp-jp-i18n-state', false, array( 'wp-deprecated', 'wp-jp-i18n-loader' ) );
 		$wp_scripts->add_inline_script( 'wp-jp-i18n-state', 'wp.deprecated( "wp-jp-i18n-state", { alternative: "wp-jp-i18n-loader" } );' );
 		$wp_scripts->add_inline_script( 'wp-jp-i18n-state', 'wp.jpI18nState = wp.jpI18nLoader.state;' );
+
+		// Register the React JSX runtime script - used as a polyfill until we can update JSX transforms. See https://github.com/Automattic/jetpack/issues/38424.
+		// Note: when removing this, also remove the inclusion of `react-jsx-runtime` from test_wp_default_scripts_hook where it is expected to be returned when the $mock calls the 'add' method.
+		$jsx_url = self::normalize_path( plugins_url( $jsx_path, __FILE__ ) );
+		$wp_scripts->add( 'react-jsx-runtime', $jsx_url, array( 'react' ), '18.3.1', true );
 	}
 
 	// endregion .

projects/packages/assets/tests/php/test-assets.php

@@ -757,7 +757,7 @@ function ( $value ) use ( $value_sets, $i ) {
 			return $funcs;
 		};
 
-		$mock->expects( $this->exactly( 2 ) )->method( 'add' )
+		$mock->expects( $this->exactly( 3 ) )->method( 'add' )
 			->with(
 				...$with_consecutive(
 					array(
@@ -768,7 +768,15 @@ function ( $value ) use ( $value_sets, $i ) {
 						),
 						array( 'wp-i18n' ),
 					),
-					array( 'wp-jp-i18n-state', false, array( 'wp-deprecated', 'wp-jp-i18n-loader' ) )
+					array( 'wp-jp-i18n-state', false, array( 'wp-deprecated', 'wp-jp-i18n-loader' ) ),
+					array(
+						'react-jsx-runtime',
+						$this->logicalOr(
+							'http://www.example.com/wp-content/plugins/jetpack/packages/assets/build/react-jsx-runtime.js',
+							'http://www.example.com/wp-content/plugins/jetpack/packages/assets/src/js/react-jsx-runtime.js'
+						),
+						array( 'react' ),
+					)
 				)
 			);
 		$mock->expects( $this->exactly( 3 ) )->method( 'add_inline_script' )

projects/packages/assets/webpack.config.js

@@ -34,4 +34,23 @@ module.exports = [
 			],
 		},
 	},
+	{
+		entry: {
+			'react-jsx-runtime': {
+				import: 'react/jsx-runtime',
+			},
+		},
+		output: {
+			...jetpackWebpackConfig.output,
+			path: path.resolve( './build' ),
+			filename: 'react-jsx-runtime.js',
+			library: {
+				name: 'ReactJSXRuntime',
+				type: 'window',
+			},
+		},
+		externals: {
+			react: 'React',
+		},
+	},
 ];