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

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.

Answer 2

I faced same issue and fix is easy. As stated here, you need to set SCRIPT_DEBUG flag: https://github.com/WordPress/gutenberg/tree/trunk/packages/scripts#start

Add in the wp-config.php

define('SCRIPT_DEBUG', true);

Answer 3

browser-sync-webpack-plugin plugin did the trick for me.

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = {
   ...defaultConfig,
   plugins:[
      ...defaultConfig.plugins,
      new BrowserSyncPlugin({
         proxy: 'http://' + siteName + '.domain', //example http://demo.local
         host:  siteName + '.domain',,
         open: 'external',
      }),
   ]
}