使用 --hot 的 react-refresh-webpack-plugin 和 wordpress/scripts 问题答案

【问题标题】：Issue with react-refresh-webpack-plugin and wordpress/scripts using --hot使用 --hot 的 react-refresh-webpack-plugin 和 wordpress/scripts 问题
【发布时间】：2023-01-21 09:03:42
【问题描述】：

我无法通过“wp-scripts start --hot”运行来获得 HMR。我在几个项目中尝试过这个，包括相当空的项目。

一旦我将 --hot 标志添加到我的 npm 脚本中，我仍然可以让脚本运行，但我在控制台中收到此错误消息：

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，因为它似乎在较早的时候中断了。

我已经来回更改了节点版本，删除了所有节点模块和 package-lock.json，取出了我所有的 Javascript 以查看是否可以解决任何问题，但事实并非如此。

我的设置： Local by Flywheel 作为 Wordpress 本地环境 WordPress：6.0.3 节点 V 16.18.0 npm 8.19.2 @wordpress/脚本版本：24.4.0

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

我还按照此处所述安装并激活了 Gutenberg 插件：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。

有没有其他人遇到这个错误或任何人都可以帮助解决这个问题？

非常感谢和欢呼约翰内斯

【问题讨论】：

我也卡在这里，版本 6.1.1

标签： wordpress webpack-hmr react-refresh-webpack-plugin

【解决方案1】：

选择

我无法让react-refresh-webpack-plugin在@worpress/script 中工作，所以最终使用BrowserSyncPlugin，这是我扩展@wordpress/script webpack 配置的方式。希望它能帮助别人


/**
 * 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
      }),
    ]
  }
}

和yarn run start

免责声明：我在 docker env 中开发。我知道这不是问题的答案，但如果您遇到困难，请尝试一下。

【讨论】：