Проблема с плагином react-refresh-webpack-plugin и wordpress/scripts с использованием --hot
Я не могу получить HMR с запущенным «wp-scripts start --hot». Я пробовал это в нескольких проектах, включая довольно пустые проекты.
Как только я добавляю флаг --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, чтобы посмотреть, решает ли это что-нибудь, но это не так.
Моя установка: Локальная от Flyhweel как локальная среда Wordpress Wordpress: 6.0.3Node V 16.18.0npm 8.19.2@wordpress/scripts Версия: 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%20включает%20%E2%80%9CFast%20Обновить%E2%80%9D.%20%20страница%20будет%20автоматически%20перезагружать%20если%20вы%20внесите%20изменения%20на%20%20код.% 20Для%20сейчас%2C%20это%20требуется%20что%20WordPress%20 имеет%20%20SCRIPT_DEBUG%20flag%20включен%20и%20%20Gutenberg%20плагин%20установлен .
Кто-нибудь еще испытывает эту ошибку или может кто-нибудь помочь с этим?
Большое спасибо и ура Йоханнес
2 ответа
Альтернатива
Я не мог получитьreact-refresh-webpack-plugin
для работы в @worpress/script, поэтому в итоге использовалBrowserSyncPlugin
, вот как я расширил конфигурацию веб-пакета @wordpress/script. Надеюсь, это поможет кому-то
/**
* 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. я знаю, что это не ответ на вопрос, но если вы застряли, пожалуйста, попробуйте.
Я столкнулся с той же проблемой, и исправить ее легко. Как указано здесь, вам необходимо установить флаг SCRIPT_DEBUG: https://github.com/WordPress/gutenberg/tree/trunk/packages/scripts#start .
Добавьте в wp-config.php
define('SCRIPT_DEBUG', true);