Question 2392 in Wordpress Question posted in
The official Wordpress documentation can be found here.

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

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

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search