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

Question

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

Answer 1

Alternative
I could not get react-refresh-webpack-plugin to work in #worpress/script so ended up using BrowserSyncPlugin, here is how i extended the #wordpress/script webpack config. Hope it helps someone
/**
* External Dependencies
*/
const path = require('path');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
/**
* WordPress Dependencies
*/
const defaultConfig = require('#wordpress/scripts/config/webpack.config.js');
module.exports = {
...defaultConfig,
...{
entry: {
theme: path.resolve(process.cwd(), 'src', 'theme.js'),
},
plugins: [
...defaultConfig.plugins,
new BrowserSyncPlugin({
// inspect docker network to get this container external ip
// then specify it in host
host: '172.44.0.3', //docker container host
port: 8887,
//server: { baseDir: ['public'] },
proxy: 'http://172.44.0.1:7020/', //docker container host
open: false
}),
]
}
}
and yarn run start
Disclaimer: Am developing in docker env. i know its not answer to the question, but if you are stuck, kindly try it out.