Блог

У меня есть функциональный компонент React, SimpleComponent экспортированный из library проекта и опубликованный в пакетах GitHub. Этот пакет используется в consumer проекте, который просто отображает SimpleComponent . Если SimpleComponent используется перехват React, он не отображается в consumer проекте, и я получаю следующую ошибку, связанную с перехватом React:

Uncaught Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

library проект:https://github.com/joshigaurava/library
consumer проект:https://github.com/joshigaurava/consumer

Оба проекта используют React, TypeScript и webpack. Включены конфигурации Package.json, TypeScript и webpack.

library версия пакета 0.0.1 содержит SimpleComponent без перехвата React, и она отлично отображается и функционирует в consumer проекте. ( SimpleComponent работает)

library версия пакета 0.0.2 содержит SimpleComponent перехват React, и он не отображается в consumer проекте. ( SimpleComponent сбой)

Я вижу, что многие другие сталкиваются с подобной проблемой, и я пробовал разные вещи до сих пор, но ничего не сработало:

• Убедитесь, что в consumer проекте существует единственная зависимость от react / react-dom ( npm ls react , npm ls react-dom )
• Не устранена ни одна из проблем, перечисленных вhttps://reactjs.org/warnings/invalid-hook-call-warning.html произошли
• Люди, похоже, решили эту проблему с помощью npm link или символических ссылок при использовании npm file: в зависимостях, но в моем случае consumer project использует library project, используя пакет npm, и поэтому это не применимо
• Глупо пытался экспортировать SimpleComponent разными способами — с или без default и т.д.

Теперь мне интересно, имеет ли это какое-то отношение к тому, как webpack объединяет library проект. Но я трачу слишком много времени на эту проблему, и любая помощь будет оценена.

проблема заключалась в конфигурации webpack. Реакция была включена в вывод. Для тех, кто столкнулся с этой проблемой, следующая конфигурация webpack помогла ее исправить:

 externals = {
  react: {
    root: "React",
    commonjs2: "react",
    commonjs: "react",
    amd: "react",
    umd: "react",
  },
  "react-dom": {
    root: "ReactDOM",
    commonjs2: "react-dom",
    commonjs: "react-dom",
    amd: "react-dom",
    umd: "react-dom",
  },
};