Блог

Главная - Вопросы по программированию - Дублировать React после загрузки пакета npm

Дублировать React после загрузки пакета npm

#reactjs #react-native #npm #react-hooks

#reactjs #react-родной #npm #реагирующие хуки

Вопрос:

У меня есть пакет npm (который я опубликовал), который вызывает дублирование экземпляров React и, следовательно, следующее исключение компонента: «Недопустимый вызов перехвата. Хуки могут вызываться только внутри тела функционального компонента … «

Что я должен сделать, чтобы предотвратить возникновение этой ошибки в проектах, которые загружают этот пакет?

Комментарии:

1. это не похоже на повторяющиеся экземпляры. Похоже, вы используете перехват в компонентах класса, и вы можете использовать перехваты только в функциональных компонентах. reactjs.org/warnings /…

2. Спасибо за комментарий, но это функциональные компоненты. Вы можете увидеть исходный код пакета здесь . Я знаю, что это дублированные экземпляры React, когда я запускал npm ls react и видел два экземпляра React.

3. это работает в этой закуске, которую я создал? snack.expo.io/@yoobit0616/slider

4. Я вижу, но все же — я получил пару проблем (могу видеть это в репозитории), поэтому я создал новый проект и установил его там сам, а также получил это исключение.

5. Большое спасибо за готовность помочь. Я обнаружил проблему. Вы можете увидеть мой ответ, если хотите также понять проблему 🙂

Ответ №1:

РЕДАКТИРОВАТЬ: следующий ответ относится к публикации пакета, а не к установке.

Для будущих поколений (и текущих) на случай, если вы столкнулись с той же проблемой, что означает, что вы запустили npm ls react и увидели 2 разных экземпляра React . Проблема связана с тем, что React должно быть у вас package.json под peerDependencied , а не под dependencies .

Вы можете найти много информации об этом в Интернете, но я рекомендую прочитать эту статью, поскольку она упрощает тему и делает ее понятной.

Ответ №2:

В одном приложении React может существовать в нескольких экземплярах (наиболее вероятная причина): ** Если вы используете Node для управления пакетами, вы можете запустить, чтобы проверить дублирование React в папке вашего проекта:

 npm ls react

чтобы решить проблему: 1. не используйте react , react-dom в качестве зависимостей или devDepenencies в файле package.json вашего опубликованного пакета, а просто укажите их как peerDependencies
2. (как обычно я решаю эту проблему): упоминание внутри webpack.config.js файл :

      resolve: {
    alias: {
      react: path.resolve("./node_modules/react"),
    },
  },

Ответ №3:

Просто, когда вы создаете свой пакет, не указывайте какую-либо версию для react добавления в зависимость "react:": "*"

Это будет означать, что он будет использовать любую react версию, установленную в пользовательском проекте