Issue with react-refresh-webpack-plugin and wordpress/scripts using --hot

[johannes-fl]

Hey there,

I am not able to get the HMR with "wp-scripts start --hot" running. I tried this in several project, including rather empty projects.

As soon as I add the --hot flag to my npm script, I can still get the script running but I get this error message in my console:

ReactRefreshEntry.js:17 Uncaught TypeError: Cannot read properties of undefined (reading 'injectIntoGlobalHook') at ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js (ReactRefreshEntry.js:17:1) at options.factory (react refresh:6:1) at __webpack_require__ (bootstrap:24:1) at startup:4:66 at __webpack_require__.O (chunk loaded:25:1) at startup:9:1 at startup:9:1

It doesn't even load my Javascript as it seems to break at an earlier point.

I already changed Node Versions back and forth, deleted all node-modules and the package-lock.json, took out all my Javascript to see if this solves anything, but it doesn't.

My setup:
Local by Flyhweel as Wordpress local environment
Wordpress: 6.0.3
Node V 16.18.0
npm 8.19.2
@wordpress/scripts Version: 24.4.0

wp-config.php:
define('WP_DEBUG', false); define('SCRIPT_DEBUG', true);

Also I got the Gutenberg Plugin installed and activated as stated here: https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#:~:text=%2D%2Dhot%20%E2%80%93%20enables%20%E2%80%9CFast%20Refresh%E2%80%9D.%20The%20page%20will%20automatically%20reload%20if%20you%20make%20changes%20to%20the%20code.%20For%20now%2C%20it%20requires%20that%20WordPress%20has%20the%20SCRIPT_DEBUG%20flag%20enabled%20and%20the%20Gutenberg%20plugin%20installed.

Does anyone else experience this bug or can anyone help with this?

Many thanks and cheers
Johannes

[Lovor01]

Hello, see if this #46948 helps. Also, check with possible interference from browser extensions (I had that problem). Finally, try adding react developer tools browser extension if you do not have it already.

[Lovor01]

It works now without Gutenberg plugin (WP 6.1.1)