Реактивный компонент в блочный плагин Wordpress Gutenberg генерирует 321 React Error - PullRequest
Новая
       20

Реактивный компонент в блочный плагин Wordpress Gutenberg генерирует 321 React Error

0 голосов
/ 02 апреля 2020

Я пытаюсь создать свой собственный React Component как внешнюю библиотеку (на самом деле я использую create-react-library для быстрых скаффолдингов), которую я хочу импортировать и использовать внутри моего пользовательского блочного плагина WordPress Gutenberg для внешних целей. (Я хочу сделать это в функции save()).

Я сталкиваюсь с проблемой, порожденной минимизированной версией response-dom (используемой Wordpress Gutenberg), которая говорит мне, что есть некоторые несоответствия; Вот объяснение возникшей ошибки https://reactjs.org/docs/error-decoder.html/?invariant=321.

Неправильный вызов ловушки. Хуки могут быть вызваны только внутри тела компонента функции. Это может произойти по одной из следующих причин: 1. У вас могут быть несовпадающие версии React и средства визуализации (например, React DOM). 2. Возможно, вы нарушаете правила хуков. 3. Возможно, у вас есть несколько копий React в то же самое приложение

Мой компонент использует Reack Hooks, и ошибка возникает, когда срабатывает функция useState().

Пока я уверен, что это не проблема, связанная с неправильным использование ловушек реагирования, но я думаю, что это связано с тем, что мой компонент, который загружает и использует другие внешние компоненты, пытается визуализировать подкомпоненты с библиотекой реагирования, отличной от библиотеки WP Gutenberg.

Мой недавно созданный пользовательский компонент прекрасно работает вне среды WP Gutenberg, поэтому проблема заключается в том, как заставить этих двух актеров работать вместе.

Я использую wp-scripts build для создания пакета, используемого WP ловушки для импорта, и соответствующее сообщение, которое я считаю полезным поделиться: 

...
[@wordpress/blocks] external {"this":["wp","blocks"]} 42 bytes {index} [built]
[@wordpress/element] external {"this":["wp","element"]} 42 bytes {index} [built]
[@wordpress/i18n] external {"this":["wp","i18n"]} 42 bytes {index} [built]
[react] external {"this":"React"} 42 bytes {index} [built] <- **using external react**

Так что я могу сделать, чтобы мой компонент React работал без проблем с WP Gutenberg Block

Пожалуйста, не стесняйтесь чтобы запросить дополнительную информацию и подробности, я буду обновлять пост по мере необходимости

1 Ответ

0 голосов
/ 03 апреля 2020

Проблема была связана с тем, что импортированные библиотеки без react и react-dom как peerDependencies были упакованы веб-пакетом во время сборки в моем компоненте. Таким образом, различные версии react и react-dom жили в одном и том же контексте в один и тот же момент времени, когда использовался плагином WP, вызывая ошибку, о которой сообщалось выше.

Решение состояло в том, чтобы delcare в конфигурации веб-пакета записать external, указав правильные зависимости, созданные во время выполнения плагином WP и настроенные в моем компоненте react и react-dom в качестве одноранговых зависимостей для проекта.

Надеюсь, это поможет.

...