Changeset 61543

Timestamp:

01/28/2026 10:27:19 AM (9 months ago)

Author:

youknowriad

Message:

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.

Location:

trunk

Files:

• tools/webpack/development.js (modified) (3 diffs)
• webpack.config.js (modified) (1 diff)

trunk/tools/webpack/development.js

@@ -15 +15 @@
  * 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
@@ -53 +34 @@
                 devtool: false,
                 cache: true,
-                entry,
                 output: {
                         path: baseDir,
@@ -70 +50 @@
                 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 ];
 };

trunk/webpack.config.js

@@ -16 +16 @@
         // 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 ),
         ];