使用wp-scripts start --hot时HMR无法运行，遇ReactRefresh错误

我无法通过wp-scripts start --hot启用HMR（热模块替换），在多个项目（包括空项目）中尝试后问题依旧。

只要在npm脚本中添加--hot参数，脚本虽能运行，但控制台会出现如下错误：

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

程序在早期阶段中断，导致我的JavaScript无法加载。

我已尝试切换Node版本、删除node_modules和package-lock.json、移除自定义JS代码等操作，但均未解决问题。

环境配置 #

• 本地WordPress环境：Local by Flywheel
• WordPress版本：6.0.3
• Node版本：16.18.0
• npm版本：8.19.2
• @wordpress/scripts版本：24.4.0

wp-config.php设置 #

define('WP_DEBUG', false); define('SCRIPT_DEBUG', true);

我已按文档要求安装并激活Gutenberg插件。

请问是否有其他人遇到此问题，或能提供解决方案？

感谢您的帮助
Johannes

可能的解决方案 #

1. 调整WP_DEBUG和SCRIPT_DEBUG的设置
   将WP_DEBUG设为true，同时保持SCRIPT_DEBUG为true。修改wp-config.php：

   define('WP_DEBUG', true);
   define('SCRIPT_DEBUG', true);
   

   部分场景下，WP_DEBUG关闭会导致webpack相关的调试钩子无法正常初始化，引发该错误。

2. 升级@wordpress/scripts版本
   当前使用的24.4.0版本可能存在与react-refresh-webpack-plugin的兼容问题，尝试升级到较新版本：

   npm update @wordpress/scripts
   

   最新稳定版通常会修复这类依赖兼容问题。

3. 锁定react-refresh-webpack-plugin的兼容版本
   手动安装适配@wordpress/scripts 24.x系列的插件版本：

   npm install @pmmmwh/react-refresh-webpack-plugin@0.5.10 --save-dev
   

4. 自定义webpack配置禁用自动注入
   在项目根目录创建webpack.config.js，覆盖默认配置，手动控制React Refresh加载：

   const defaultConfig = require('@wordpress/scripts/config/webpack.config');
   const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
   
   module.exports = {
     ...defaultConfig,
     plugins: [
       ...defaultConfig.plugins.filter(plugin => plugin.constructor.name !== 'ReactRefreshWebpackPlugin'),
       new ReactRefreshWebpackPlugin({
         overlay: false,
       }),
     ],
   };
   

内容的提问来源于stack exchange，提问作者Jo_hannes