Build/Test Tools: Fix React Refresh hot reloading for block plugins.

The `react-refresh-entry.js` script was bundling its own copy of
`react-refresh/runtime` instead of using the `window.ReactRefreshRuntime`
global set up by `react-refresh-runtime.js`. This created two separate
runtime instances: the entry script set up hooks on its bundled copy, while
plugins called `performReactRefresh()` on the window global — a different
instance with no hooks registered.

This splits the development webpack config into two configs so that
`externals` only applies to the entry script. The runtime config bundles
`react-refresh/runtime` and exposes it as `window.ReactRefreshRuntime`,
while the entry config uses that global as an external.

Props manzoorwanijk, wildworks.
See #64393.

git-svn-id: https://develop.svn.wordpress.org/trunk@61543 602fd350-edb4-49c9-b593-d223f7449a82
(cherry picked from commit 8be3411)

Author: youknowriad

tools/webpack/development.js

@@ -14,45 +14,25 @@ const { baseDir } = require( './shared' );
  * These scripts enable hot module replacement for plugins
  * using `@wordpress/scripts` with the `--hot` flag.
  *
+ * Returns two separate configs:
+ * 1. Runtime config - bundles react-refresh/runtime and exposes it as window.ReactRefreshRuntime
+ * 2. Entry config - uses the window global as an external to ensure both scripts share the same runtime instance
+ *
  * @param {Object} env             Environment options.
  * @param {string} env.buildTarget Build target directory.
  * @param {boolean} env.watch      Whether to watch for changes.
- * @return {Object} Webpack configuration object.
+ * @return {Object[]} Array of webpack configuration objects.
  */
 module.exports = function( env = { buildTarget: 'src/', watch: false } ) {
 	const buildTarget = env.buildTarget || 'src/';
 
-	const entry = {
-		// React Refresh runtime - exposes ReactRefreshRuntime global.
-		[ buildTarget + 'wp-includes/js/dist/development/react-refresh-runtime.js' ]: {
-			import: 'react-refresh/runtime',
-			library: {
-				name: 'ReactRefreshRuntime',
-				type: 'window',
-			},
-		},
-		[ buildTarget + 'wp-includes/js/dist/development/react-refresh-runtime.min.js' ]: {
-			import: 'react-refresh/runtime',
-			library: {
-				name: 'ReactRefreshRuntime',
-				type: 'window',
-			},
-		},
-		// React Refresh entry - injects runtime into global hook before React loads.
-		[ buildTarget + 'wp-includes/js/dist/development/react-refresh-entry.js' ]:
-			'@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js',
-		[ buildTarget + 'wp-includes/js/dist/development/react-refresh-entry.min.js' ]:
-			'@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js',
-	};
-
-	return {
+	const baseConfig = {
 		target: 'browserslist',
 		// Must use development mode to preserve process.env.NODE_ENV checks
 		// in the source files. These scripts are only used during development.
 		mode: 'development',
 		devtool: false,
 		cache: true,
-		entry,
 		output: {
 			path: baseDir,
 			filename: '[name]',
@@ -69,4 +49,47 @@ module.exports = function( env = { buildTarget: 'src/', watch: false } ) {
 		},
 		watch: env.watch,
 	};
+
+	// Config for react-refresh-runtime.js - bundles the runtime and exposes
+	// it as window.ReactRefreshRuntime. No externals - this creates the global.
+	const runtimeConfig = {
+		...baseConfig,
+		name: 'runtime',
+		entry: {
+			[ buildTarget + 'wp-includes/js/dist/development/react-refresh-runtime.js' ]: {
+				import: 'react-refresh/runtime',
+				library: {
+					name: 'ReactRefreshRuntime',
+					type: 'window',
+				},
+			},
+			[ buildTarget + 'wp-includes/js/dist/development/react-refresh-runtime.min.js' ]: {
+				import: 'react-refresh/runtime',
+				library: {
+					name: 'ReactRefreshRuntime',
+					type: 'window',
+				},
+			},
+		},
+	};
+
+	// Config for react-refresh-entry.js - uses window.ReactRefreshRuntime as an
+	// external instead of bundling its own copy. This ensures the hooks set up
+	// by the entry are on the same runtime instance that plugins use for
+	// performReactRefresh().
+	const entryConfig = {
+		...baseConfig,
+		name: 'entry',
+		entry: {
+			[ buildTarget + 'wp-includes/js/dist/development/react-refresh-entry.js' ]:
+				'@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js',
+			[ buildTarget + 'wp-includes/js/dist/development/react-refresh-entry.min.js' ]:
+				'@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js',
+		},
+		externals: {
+			'react-refresh/runtime': 'ReactRefreshRuntime',
+		},
+	};
+
+	return [ runtimeConfig, entryConfig ];
 };

webpack.config.js

@@ -15,9 +15,10 @@ module.exports = function (
 	// Only building Core-specific media files and development scripts.
 	// Blocks, packages, script modules, and vendors are now sourced from
 	// the Gutenberg build (see tools/gutenberg/copy-gutenberg-build.js).
+	// Note: developmentConfig returns an array of configs, so we spread it.
 	const config = [
 		mediaConfig( env ),
-		developmentConfig( env ),
+		...developmentConfig( env ),
 	];
 
 	return config;