Реагировать на ловушки в реагирующей библиотеке, выдающие неверную ошибку вызова ловушки

Я создал библиотеку React с create-react-library этой библиотекой — вашим General компонентом. Я опубликовал его в npm здесь https://www.npmjs.com/package/stackoverflow-тест и в приложении React для использования здесь https://codesandbox.io/s/mm7yl83o28.

Просто нажмите на General component текст, и count будет увеличено.

Я не могу воспроизвести вашу проблему, просто используйте этот тест, чтобы проверить вашу реализацию.

Я включил свою библиотеку компонентов (в этом отношении любую библиотеку) в свое приложение, как это сделал @Janith, используя my-comp-lib:"file:../.." (я не хочу публиковать каждый раз, когда хочу протестировать), и столкнулся с той же проблемой.

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app See react-invalid-hook-call for tips about how to debug and

fix this problem

Я смог исправить это, заставив мое приложение и библиотеку указывать на одно и то же место реакции (пакета).

Below are the steps I followed :
1. In Your Application:
a) cd node_modules/react && npm link
b) cd node_modules/react-dom && npm link

2. In Your Library
a) npm link react
b) npm link react-dom

3)Stop your dev-server and do `npm start` again.

Оно работает!!

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

https://github.com/facebook/реагировать/issues/14721

https://github.com/facebook/реагировать/тянуть/14690

https://github.com/facebook/реагировать/issues/13991

Примечание. Эта проблема не возникнет, если вы опубликуете свой пакет в Artifactory и установите, потому что у вас будут react и react-dom в качестве одноранговых зависимостей, и они не будут включены в дистрибутив. Таким образом, ваш пакет и приложение используют ту же реакцию, которая установлена ​​в приложении.

Я только что столкнулся с той же проблемой. Я смог это исправить, указав на ту же реакцию в моем примере приложения, что и в моей библиотеке:

Структура приложения

Корень

• Пример
  • пакет.json
• источник (библиотека)
• пакет.json

Итак, из примера > package.json я изменил реакцию на:

    "react": "link:../node_modules/react",

Это очень похоже на npm link, перечисленное выше, но оно не исчезнет при каждой установке npm.

У меня это сработало, когда я изменил ссылку из приложения на библиотеку на «ссылка:../» вместо «файл:../», в дополнение к связыванию реакции и реакции-дом.

Добавьте в свою библиотеку компонентов package.json

"peerDependencies": {
  "react": "<your version>"
}

так что ваш пакет lib будет использовать тот же пакет react, что и ваше основное приложение. https://nodejs.org/es/blog/npm/peer-dependencies/

React 17 + Библиотека тестирования React + Umi (интерфейсный фреймворк, встроенный реагирующий маршрутизатор)

В моем случае, когда я запускаю модульный тест, я получаю сообщение об ошибке «неверный вызов ловушки».

После периода попыток я нашел два способа решения.

1. Перейдите на React 16.x, тогда все будет хорошо.
2. Продолжайте использовать React 17.x и
   • Надо еще написать import React from 'react'
   • Установить react-router-dom отдельно

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

Также проверьте свою версию npm. У меня была версия 7.0.8 которая устарела, после смены на 6.14.8 все заработало нормально!

ПРИ ТЕСТИРОВАНИИ РЕАЛЬНОГО ПРИЛОЖЕНИЯ В REACT NATIVE

У меня такая же проблема, и я удаляю файл node_module в своей пользовательской библиотеке, и я исправил его.

проблема при установке прямого модуля

пряжа добавить c:/user......./react-native-some-lib

У меня была та же проблема, когда я работал с срочным монорепозиторием, настраивал пользовательский интерфейс и создавал приложения с использованием nextjs.

Решения были добавлены в следующий код на package.json

"resolutions": {
  "react": "17.0.1", // verificate your react version
  "react-dom": "17.0.1"
}

В библиотеке package.json:

"peerDependencies": {
   "react": "17.0.1",
   "react-dom": "17.0.1"
 },

Подробнее здесь: https://github.com/vercel/next.js/issues/9022#issuecomment-728688452

В моем случае я создаю свою собственную общую библиотеку. Хотя я экспортировал createContext, useContext и useState из "react", я просто забыл также импортировать экспорт по умолчанию, React.

Изменение моего оператора импорта с этого:
import { createContext, useContext, useState } from "react";

на это:
import React, { createContext, useContext, useState } from "react";

исправил это для меня. Возможно, вам придется сделать это в каждом компоненте/контексте React и т. д., которые вы экспортируете из своей библиотеки реагирования.

Редактировать:

В другом из моих приложений, использующих эту общую библиотеку, эта проблема также была исправлена ​​с помощью npm link, как описано в документации React (Предупреждение о недопустимом хуке):

This problem can also come up when you use npm link or an equivalent. In that case, your bundler might “see” two Reacts — one in application folder and one in your library folder. Assuming myapp and mylib are sibling folders, one possible fix is to run npm link ../myapp/node_modules/react from mylib. This should make the library use the application’s React copy.

Итак, в моем случае я перешел к своей общей библиотеке и запустил npm link ../path-to-my-app/node_modules/react.

Изменить (23.02.2022)

Надеемся, что окончательное редактирование - другое решение состоит в том, чтобы просто глобально установить проблемную зависимость, если все приложения предполагают использовать одну и ту же версию, например. npm install react -g