Changeset 61543

Timestamp:

01/28/2026 10:27:19 AM (2 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 ),
     ];