Итак, просто для уточнения: вы импортировали хук (скажем, useState ) из другого модуля react , отличного от того, который использовался для рендеринга компонента?

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

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

Да, я сравнил React1 === React2 , и это было false (React1 из index.js, а React2 из файла с использованием хука). Когда это происходит, хуки терпят неудачу с общим сообщением об ошибке выше.

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

Да, я пытался npm связать пакет, который я создаю. Он выдает ту же ошибку, поскольку другой пакет также использует хуки, но со своим собственным React. Мне пришлось опубликовать свой пакет в NPM, а затем импортировать его напрямую из NPM. Таким образом, ошибка исчезла, но я надеюсь, что это исправлено, поскольку публикация пакета без его тестирования — это плохо, очевидно.

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

На данный момент у меня есть (хакерский) обходной путь, использующий npm-link-shared и скрипт prestart npm, чтобы по существу заменить зависимость react одного пакета символической ссылкой на другой, поэтому они используют тот самый экземпляр.

"prestart": "npm-link-shared ./node_modules/<other package>/node_modules . react"

У меня была такая же проблема, и я решил ее, добавив:

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

to свойство resolve в конфигурации веб-пакета моего основного приложения.

Очевидно, это была моя ошибка, когда я использовал две копии React, но я согласен, что было бы здорово, если бы сообщение об ошибке было лучше. Я думаю, что это может быть похоже на: https://github.com/facebook/react/issues/2402

@mpeyper Это работает. Спасибо

@apieceofbart Это сработало для меня. Спасибо за предложение. 👍

Насколько я понимаю, эта проблема возникает, когда в одном комплекте есть несколько копий React.

Является ли это также проблемой, если два отдельных пакета со своими собственными копиями React загружают свои собственные приложения React на отдельные элементы dom, как описано здесь: https://medium.jonasbandi.net/hosting-multiple-react-applications-on- тот же документ-c887df1a1fcd

Я думаю, что последний является распространенным шаблоном «интеграции», используемым, например, в мета-фреймворке single-spa (https://github.com/CanopyTax/single-spa).

У меня также есть эта проблема даже с точно такими же версиями реакции, разработка хуков для публикации самостоятельно не работает при использовании npm-link . Получение такого же бесполезного сообщения hooks can only be called inside the body of a function component . Решение псевдонима @apieceofbart решило это для меня. Большое спасибо!

Та же проблема здесь, когда я npm link пакет для моего основного приложения. Я не мог заставить babel-plugin-module-resolver работать.
В нем говорится:
Could not find module './node_module/react'
Это раздражает, потому что не позволяет мне протестировать мой компонент локально перед его публикацией.

Я исправил свою проблему, удалив курсор в "react": "^16.7.0-alpha.2"
Вот полный комментарий: https://github.com/facebook/react/issues/14454#issuecomment -449585005

Я использую Yarn и исправил это, задав разрешение в моем package.json :

  "resolutions": {
    "**/react": "16.7.0-alpha.2",
    "**/react-dom": "16.7.0-alpha.2"
  },

То же самое!!

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

Мы запускаем React и Rails с гемом react-rails и отрисовываем компоненты непосредственно в представлениях Rails. Я получал эту ошибку каждый раз, когда загружалась новая версия приложения, потому что Turbolinks брал новый пакет JS из <head> , который загружал дополнительный экземпляр React. Решение заключалось в том, чтобы Turbolinks выполнял полную перезагрузку страницы при обнаружении изменения пакета: https://github.com/turbolinks/turbolinks#reloading -when-assets-change

Это, кажется, решило это для нас.

Я очень рад наконец запустить Hooks в производство, и мы все должны поблагодарить всех, кто сделал это возможным. С ними очень весело работать, и они сделали мой код короче и более декларативным.

Напоминаем, что эта проблема по-прежнему актуальна в выпущенной версии с тем же бесполезным сообщением об ошибке «Хуки могут вызываться только внутри тела функционального компонента».

Это то, что можно исправить? Я предполагаю, что это может стать все более и более распространенным, поскольку все больше разработчиков начинают внедрять новые функции, и более четкое сообщение об ошибке будет иметь большое значение вместо прямого «исправления».

Еще раз спасибо за всю тяжелую работу и поздравляю с релизом! Это действительно потрясающий набор функций.

Редактировать : нужно было присмотреться к открытым PR, только что нашел # 14690, который решает эту проблему. Спасибо @threepointone!

@taylorham Ссылка в коммите еще ни на что не указывает. Я подожду, но это проблема, с которой я столкнулся с тех пор, как использовал хуки в связанном пакете _(начиная с npm link )_, и невозможно работать с ним локально без публикации.
Изучив несколько проблем, я решил, что это проблема с react-hot-loader , который компилировал компоненты в классы, но даже после того, как они выпустили версию с поддержкой Hook , она по-прежнему терпит неудачу.
Я пробовал много разных хаков, но не повезло. Не знаю, почему до сих пор всех не поразила эта проблема 🧐

@dotlouis Да, пока это просто обновленное сообщение об ошибке, и сама проблема по-прежнему доставляет неудобства.

Единственное, что сработало для меня, — это сделать так, чтобы любое разрабатываемое мной приложение зависело от экземпляра библиотеки React с помощью "react": "link:../my-library/node_modules/react" .

• ни одно из предложенных решений не сработало для меня, и я пробовал все
• пытается установить контекст реализации проекта и множество HOC
• начало с пустого проекта помогло
• я продолжаю искать причину

[хорошо] для меня исправление не касалось package.json или других причин двойной реакции: у меня был глобальный themeProvider поверх моего приложения, исходя из контекста. Замена его на «useContext Hook» (при переписывании его как функционального компа) казалась единственным решением.
Может быть, есть проблема, когда

<GoodOldContext iam={a class component}>
    <BrandNewHook>
             errors : Hooks can only be called inside the body of a function component #35
     </BrandnewHook>
</GooOldContext>
export withGoodOldContext.consumer(here component)

Я разрабатываю компонент, в котором есть папка example , в которой используется create-react-app .

Выполнение этого в package.json решило эту проблему для меня:

{
    ...
    "dependencies": {
        "my-component": "link:..",
        "react": "link:../node_modules/react",
        "react-dom": "link:../node_modules/react-dom",
        "react-scripts": "2.1.3"
    },
    ...
}

@taylorham @DylanVann Спасибо за ваш вклад, ребята. К сожалению, это все еще не работает для меня.
И я не смог найти никакой документации об этом протоколе link: , который вы использовали.
По сути, в нем говорится, что «реагирование-спринг» (еще одно отделение, которое также использует реакцию в качестве зависимости) не может найти react-dom . Не могли бы вы указать мне какую-нибудь документацию о "react": "link:../some/path" , пожалуйста?

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

Просто для лучшего контекста - https://github.com/facebook/react/issues/14257

Спасибо @theKashey. @gaearon , кажется, считает, что это нормальное поведение. Я понимаю, что React не следует загружать дважды, но как тогда рекомендуется работать со связанным локальным пакетом?

У меня также были проблемы с правильными символическими ссылками на рабочие пространства Lerna. Это был трюк, который я использовал, чтобы заставить это работать. Обязательно запустите npm install после этого.

"dependencies": {
    "react-dom": "file:../common/node_modules/react-dom",
    "react": "file:../common/node_modules/react"
}

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

• для веб-пакета используйте aliases - просто "жесткий" псевдоним, все утки, как react , в один файл

  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
    alias: {
     react: path.resolve(path.join(__dirname, './node_modules/react')),
   }

• для посылок используйте те же псевдонимы, но определите их в package.json - https://parceljs.org/module_resolution.html#aliases
• для nodejs (не шутка) вы можете использовать требуемый контроль

import {setAliases} from 'require-control';
setAliases({
  'react': path.resolve(path.join(__dirname, './node_modules/react'))
});

• для шутки используйте moduleNameMapper

"jest": {
    "moduleNameMapper": {
      "^react$": "<rootDir>/node_modules/$1",
    },

@theKashey спасибо за ваше понимание, это имеет смысл, если учесть, как выполняется разрешение модуля (внизу, затем вверх по дереву), но с точки зрения пользователя я не нахожу это очень практичным. Когда я npm link пакет, я ожидаю, что он будет работать без явного переподключения зависимостей. Это делает разработку пакета локально довольно болезненной.

Это краеугольный камень, именно так работает node_modules , вот почему у вас может быть две версии Button в двух разных основных версиях, и зависимые модули легко найдут «правильный» версия пакета.
Вот так должно работать постоянно.

Внутренности Node.js довольно просты — попробуйте открыть файл, добавив все известные префиксы (например, node_modules ) или расширения (например, js , ts , json ).

yarn pnp сделает это и может решить проблему. yarn workspaces , который может _поднимать_ общие пакеты наверх - также решит проблему без какой-либо «волшебной» помощи.

npm workspaces ? Не существует прямо сейчас.

На самом деле я переключил свой проект на использование рабочих пространств. Он решает эту проблему без использования разрешений, и в любом случае подъем/структура выгодны.

Это был головорез. Я пробовал параметр webpack resolve.alias, но он не работал, пробовал много настроек, но, к сожалению, мне так и не удалось заставить его работать, но вот как мне, наконец, удалось заставить его работать:

Вот моя структура папок:

Проект
|
+-- node_modules
|
+-- построить
| |
| +-- index.js
|
+-- пример (создать-реагировать-приложение)
| |
| +-- package.json

Мне пришлось изменить свой package.json внутри папки с примерами, по сути вытащив реакцию из «основных» модулей node_modules проекта на основе предложения @jmlivingston , вот как это закончилось:

  "dependencies": {
    "react": "file:../node_modules/react",
    "react-dom": "file:../node_modules/react-dom",
    "react-scripts": "2.1.5"
  },

Теперь, после этого, я запустил npm install , а затем запустил npm link , и это помогло.

Надеюсь, это может помочь кому-то еще и сэкономить время.

Итак, какое-либо решение этой проблемы? Я пробовал столько рекомендаций здесь, сколько мог, и не повезло. Я использую приложение create-реагировать и машинописный текст. Использование React/React-dom 16.8.3. Это новый проект, который я создал 2 дня назад, очень простой. Я использую useSpring() и анимированный.div. Спасибо

@guru-florida, ты случайно не используешь реактивный маршрутизатор?

Я использую тот же стек, что и вы (машинопись и приложение create-реагировать), и у меня проблема с атрибутом render . Изменение его на component помогло.

До:

<Route path="/signup" render={SignUp} />

После:

<Route path="/signup" component={SignUp} />

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

@mikeyyyyyy Нет, здесь React Router не используется. Спасибо за совет, потому что я был в последнем проекте, в котором пытался использовать Spring, и у меня была такая же проблема.

У меня была эта проблема со ссылкой npm (в приложении посылки), npm link .../whatever/node_modules/react , похоже, не решает ее, но отлично работает с компонентами без крючков

@tj Думаю, у тебя проблемы с ssr. Быстрый обходной путь - экспортировать функции реакции или всю реакцию из связанного пакета и импортировать ее в пакет вашего сервера.

@seeden ааа , я не использую SSR, просто SPA с посылкой. У меня есть внутренний pkg ui для моих собственных вещей и приложение, над которым я работаю, оба имеют одну и ту же версию react , кажется странным, что есть дубликат, но, возможно, это проблема Parcel

@tj о, я вижу. Тогда удачи в этом очень странном вопросе. Я провел одну неделю с этим

Итак, какое-либо решение этой проблемы?

Здесь нет проблемы как таковой. Как объяснено на этой странице , React требует, чтобы вызовы useState() находились на том же объекте react , что и объект react , «видимый» изнутри react-dom . Если это не то, что происходит с вами, это означает, что вы связываете две копии React на странице, что само по себе плохо, а также нарушает некоторые другие функции до хуков. Так что вы все равно захотите это исправить. Эта страница содержит общие способы диагностики, чтобы исправить это.

Мы оставляем это обсуждение открытым для обмена конкретными обходными путями, когда люди сталкиваются с этой проблемой. Но это не проблема сама по себе, которую может решить кто угодно, кроме вас.

У меня была эта проблема со ссылкой npm (в приложении посылки), ссылка npm .../whatever/node_modules/react, похоже, не решает ее, но отлично работает с компонентами без крючков

Не возражаете ли вы создать небольшой репродукционный кейс?

@gaearon подойдет, у него будет время покопаться еще немного на следующей неделе

К счастью, require-control исправила нашу проблему со статическим контекстом yarn link + SSR + styled-components 4. Спасибо @theKashey 👍

Я пробовал здесь все и не смог. На самом деле это было что-то другое, не задокументированное здесь. Это было связано с чувствительностью к регистру импорта реакции . В некоторых случаях у нас было:

import React from 'react'

А в других:

import React from 'React'

В некоторых файловых системах (unix, osx) это приводит к тому, что Webpack создает две копии React.

Это вызвало крайнюю путаницу, поскольку я ясно видел, что у нас есть только одна копия React; но вместо этого мы импортировали его.

Тест документации по реакции также проходит нормально, поскольку он, очевидно, использует только нижний регистр.

Это звучит так, как будто это может быть достойно упоминания в документах?

Для меня причиной нескольких экземпляров React был Webpack DllPlugin. Для моего поставщика DLL я не включил react и react-dom в свой список записей, однако у меня были другие библиотеки, которые требовали react или react-dom , поэтому моя DLL содержала react и react-dom (быстрая проверка json-файла манифеста может показать это). Итак, когда я запускал код и импортировал React в приложение, он загружал его из node_modules , но в коде поставщиков React требовался из их DLL-файла.

В целом : будьте осторожны с DLL-файлами и убедитесь, что ваши включенные модули не содержат дополнительных зависимостей, которые вам не нужны, иначе вы будете дважды импортировать их.

Я смог исправить это, обновив react-hot-loader до 4.6.0

это сработало для вещей npm link в Parcel:

"alias": {
        "react": "../ui/node_modules/react",
        "react-dom": "../ui/node_modules/react-dom"
    }

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

@theKashey OMG, чувак, это работает! Я пробовал много различных решений, которые люди предлагают, связанные с этой проблемой: манипулирование с package.json deps, отслеживание «двух реакций» в проекте, проверка, не нарушаю ли я «правило хуков» (которое я нет), но я думаю, что ваш вариант с:

alias: {
      react: path.resolve(path.join(__dirname, './node_modules/react')),
      'react-dom': path.resolve(path.join(__dirname, './node_modules/react-dom'))
    }

позволяет нам переместить наш проект на следующий уровень, используя хуки в нашем app-as-a-lib .

Это результат webpack.config.js

npm ls react

возвращается

[email protected] D:\code\project
`-- (empty)

для меня

console.log(window.React1 === window.React2) возвращает истину
на данный момент я думаю, что это SSR вызывает проблему

Обновлять. Это действительно было вызвано поведением SSR React-apollo (https://github.com/apollographql/react-apollo/issues/2541)
Обновление до 2.3.1 исправило это

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

рабочие решения для нас

Решение A: укажите позицию пакета для поиска, как указано выше.

  alias: {
      react: path.resolve(path.join(__dirname, './node_modules/react')),
      'react-dom': path.resolve(path.join(__dirname, './node_modules/react-dom'))
    }

Решение B: используйте webpack resolve.modules , чтобы определить приоритет правильной папки node_modules для поиска модулей.

предыстория дела и почему это происходит

Прежде всего, это не ошибка реакции, это даже не lerna, но реакция, веб-пакет и npm-link могут взять на себя некоторые обязанности.

Требование к делу:

-Не монорепо:

• иметь пакеты с символическими ссылками
• пакет с символической ссылкой экспортировал компонент с помощью хуков
• создание реагирующих клиентских страниц
  
  
  
  • Если вы работаете с монорепозиторием
  
  
• пакеты с символическими ссылками
• пакеты имеют разные версии зависимостей (даже разница в версиях исправлений), поэтому даже рабочее пространство будет решаться, поскольку установлено 2 реакции
• входной пакет импортировал пакет с символической ссылкой, который использует хуки

Пример

Структура

- mono repo root
  - packages
    - ComponentWithHooks (peerDependency: react@^16.8.1)
    - ProductA (dependency: ComponentWithHooks, dependency: react@^16.8.4)
    - ProductB (dependency: react@^16.8.1)

После загрузки с рабочими пространствами он разрешит

- mono repo root
  - node_modules
    - react(16.8.1)
  - packages
    - ComponentWithHooks
      - node_modules (empty)
    - ProductA
      - node_modules
        - react(16.8.4)
    - ProductB
      - node_modules (empty)

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

Код в ProductA будет искать ProductA/node_modules/react .

Но импортированный ComponentWithHooks будет искать mono repo root/node_modules/react .

Почему? Помните правила поиска npm? Если он не может найти модуль в своей собственной папке node_modules, он будет искать родительский node_modules...

Таким образом, такие инструменты, как webpack, отлично применяли это правило по умолчанию.
Нет ничего плохого в том, что решение для монорепозитория становится популярным.
И обычный пакет этого не заметит, так как большинству из них не требуется один экземпляр, как реагировать и сокращаться.

У меня такая же проблема с использованием очень простого воспроизведения с использованием примера рабочих пространств пряжи - https://github.com/mwarger/yarn-workspace-hooks-repro

У меня есть component-library , написанный машинописным шрифтом и приложенный к посылке. example-demo — это то, что продемонстрирует этот component-library , и представляет собой недавно созданное приложение CRA. Все распространенные пакеты поднимаются с помощью пряжи, поэтому теоретически должна быть доступна только одна версия реакции. Однако вызов React.useEffect , который я делаю в index.tsx, вызывает ошибку, которая приводит меня к этой проблеме с GitHub.

Все работает, пока не добавлен хук. Чтобы воспроизвести ошибку, раскомментируйте строки 7–9 в component-library/src/index.tsx

Надеюсь, я делаю что-то глупое, что я упустил из виду. Пожалуйста, сообщите, какие шаги я могу использовать, чтобы попытаться исправить это. Спасибо!

Последующее редактирование: приведенный ниже вывод сценария отладки выводит для меня true . Похоже, у меня нет двух React.

// Add this in node_modules/react-dom/index.js
window.React1 = require('react');

// Add this in your component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2);

У меня ушло несколько часов, так что, возможно, стоит сделать заметку здесь.

В моем случае я поместил строку <script defer src="./dist/bundle.js" /> в заголовок HTML-шаблона, который работает как обычно, если не используются хуки React. Все решения не работают, и в этом случае проверка window.React1 == window.React2 возвращает true .

Поскольку webpack впоследствии вставит тег скрипта, шаблон не должен иметь собственного тега скрипта. Удалите тег script из шаблона, чтобы React снова работал с хуками (каламбур).

В моем случае у меня есть приложение React, которое было npm связано с зависимостью, над которой я работал. Это поможет, пока я не исправлю пару зависимостей, которые нужно переместить react и react-dom в dev и peer deps.

1. Из приложения: cd node_modules/react && npm link
2. Из приложения: cd node_modules/react-dom && npm link react
3. Из связанного пакета: npm link react

Почему это работает? На странице с предупреждением об ошибке упоминается, что «для того, чтобы хуки работали, импорт реакции из кода вашего приложения должен разрешаться в тот же модуль, что и импорт реакции из пакета react-dom».

У меня все еще есть эта проблема, несмотря на то, что я пробовал все вышеперечисленное. Стандартная конфигурация webpack4/babel с плагинами preset-env и preset-react . Мои версии react/react-dom привязаны к 16.8.4 с использованием разрешений пряжи (где также проверка window.React1 === window.React2 сверху возвращает true ).

Это самый простой способ использования:

import React, { useState } from "react";

function MyComp() {
  const [hello] = useState(0);

  return <div>HELLO {hello}</div>;
}
export default MyComp;

У кого-нибудь есть другие идеи?

РЕДАКТИРОВАТЬ: Чтобы уточнить, ошибка отображается как react.development.js:88 Uncaught Invariant Violation: Hooks can only be called inside the body of a function component. в соответствии с OP.

В моем случае у меня есть приложение React, которое было npm связано с зависимостью, над которой я работал. Это поможет, пока я не исправлю пару зависимостей, которые нужно переместить react и react-dom в dev и peer deps.

1. Из приложения: cd node_modules/react && npm link
2. Из приложения: cd node_modules/react-dom && npm link react
3. Из связанного пакета: npm link react

Почему это работает? На странице с предупреждением об ошибке упоминается, что «для того, чтобы хуки работали, импорт реакции из кода вашего приложения должен разрешаться в тот же модуль, что и импорт реакции из пакета react-dom».

Спасибо! Это отлично работает для меня. (даже когда я использую npm-ссылку и смешанную ситуацию с символической ссылкой)

Я пробовал все, что было предложено выше, и все еще имел ошибку.

С небольшой помощью @inverherive мы обнаружили, что enzyme-adapter-react-16 по-прежнему вызывает проблемы.

В то время как мы обновили react-test-renderer до последней версии (16.8.4), так как она только недавно добавила поддержку хуков, мы обнаружили через npm ls react-test-renderer , что последняя версия enzyme-adapter-react-16 (1.11.2 ) имел внутреннюю зависимость [email protected] , которая не поддерживает хуки.

├─┬ [email protected]
│ └── [email protected] 
└── [email protected]

Чтобы решить эту проблему, а также следуя исправлениям @chulanovskyi , поскольку мы используем пряжу, мы добавили разрешения react-test-renderer в наш package.json. Это заставляет все ссылки react-test-renderer использовать «16.8.4».

  "resolutions": {
    "react-test-renderer": "16.8.4"
  },

Это было мега разочаровывающим, надеюсь, что это может помочь кому-то еще. Спасибо @chulanovskyi и @theKashey за их предложения.

Это поможет, пока я не исправлю пару зависимостей, которые необходимо переместить в dev и peer deps.

@ajcrews (возможно, я что-то пропустил, но) у меня есть npm link внутренняя библиотека, и в этой библиотеке есть react в peerDependencies и devDependencies , и мне все еще нужна ваша исправить независимо от устранения ошибки. Хорошая находка!

Я собирался написать, но нашел решение

У меня есть библиотека компонентов с примером приложения CRA для разработки.

В package.json приложения CRA мне пришлось изменить react и react-dom, чтобы «заимствовать» из package.json корневого компонента.

"dependencies": {
  "react": "link:../node_modules/react",
  "react-dom": "link:../node_modules/reac-dom",
}

Это было мега разочаровывающим, надеюсь, что это может помочь кому-то еще. Спасибо @chulanovskyi и @theKashey за их предложения.

@ Пэдди-Гамильтон Всегда проверяйте файл блокировки после установки. Я столкнулся с той же проблемой, когда yarn дублировал react-test-renderer . С небольшой операцией в вашем файле блокировки вы можете исправить это:

yarn add -D react-test-renderer

-react-test-renderer@^16.0.0-0, react-test-renderer@^16.1.1:
+react-test-renderer@^16.0.0-0:
  version "16.8.4"
  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.4.tgz#abee4c2c3bf967a8892a7b37f77370c5570d5329"
  integrity sha512-jQ9Tf/ilIGSr55Cz23AZ/7H3ABEdo9oy2zF9nDHZyhLHDSLKuoILxw2ifpBfuuwQvj4LCoqdru9iZf7gwFH28A==
  dependencies:
    object-assign "^4.1.1"
    prop-types "^15.6.2"
    react-is "^16.8.4"
    scheduler "^0.13.4"

+react-test-renderer@^16.8.5:
+  version "16.8.5"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.5.tgz#4cba7a8aad73f7e8a0bc4379a0fe21632886a563"
+  integrity sha512-/pFpHYQH4f35OqOae/DgOCXJDxBqD3K3akVfDhLgR0qYHoHjnICI/XS9QDwIhbrOFHWL7okVW9kKMaHuKvt2ng==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    react-is "^16.8.5"
+    scheduler "^0.13.5"

yarn check уже предупредит вас

$ yarn check
warning "enzyme-adapter-react-16#react-test-renderer@^16.0.0-0" could be deduped from "16.8.5" to "[email protected]"

затем вручную выполните дедупликацию, применив следующий патч:

-react-test-renderer@^16.0.0-0:
-  version "16.8.4"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.4.tgz#abee4c2c3bf967a8892a7b37f77370c5570d5329"
-  integrity sha512-jQ9Tf/ilIGSr55Cz23AZ/7H3ABEdo9oy2zF9nDHZyhLHDSLKuoILxw2ifpBfuuwQvj4LCoqdru9iZf7gwFH28A==
-  dependencies:
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    react-is "^16.8.4"
-    scheduler "^0.13.4"
-
-react-test-renderer@^16.8.5:
+react-test-renderer@^16.0.0-0, react-test-renderer@^16.8.5:

Теперь у вас есть единственная версия react-test-renderer без каких-либо псевдонимов resolutions или webpack .

По любым вопросам, связанным со связанными пакетами и create-react-app , следуйте facebook/create-react-app#6207.

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

• для веб-пакета используйте aliases - просто "жесткий" псевдоним, все утки, как react , в один файл

  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
    alias: {
     react: path.resolve(path.join(__dirname, './node_modules/react')),
   }

• для посылок используйте те же псевдонимы, но определите их в package.json - https://parceljs.org/module_resolution.html#aliases
• для nodejs (не шутка) вы можете использовать требуемый контроль

import {setAliases} from 'require-control';
setAliases({
  'react': path.resolve(path.join(__dirname, './node_modules/react'))
});

• для шутки используйте moduleNameMapper

"jest": {
    "moduleNameMapper": {
      "^react$": "<rootDir>/node_modules/$1",
    },

Это сделало это для меня.

@ajcrews
Спасибо! Работает блестяще на меня!

Я сделал небольшой тестовый пример с минимальной настройкой, используя react 16.8.6, electronic-webpack и RHL. Примечательно, что когда возникает эта ошибка, весь браузер (в этой настройке, электрон) просто начинает использовать целую кучу процессорного времени)

https://github.com/PerfectionCSGO/reeee

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

npm ls response возвращает только один результат. Я убедился, что указанное выше исправление применяется с последними версиями + псевдоним веб-пакета.

Код будет работать в песочнице.

В простом веб-пакете/веб-сайте код будет работать без проблем. Однако с электронным веб-пакетом эта проблема сохраняется.

  "dependencies": {
    "i18next": "^15.0.9",
    "i18next-browser-languagedetector": "^3.0.1",
    "react": "^16.8.6",
    "react-dom": "npm:@hot-loader/react-dom",
    "react-hot-loader": "^4.8.2",
    "react-i18next": "^10.6.1",
    "source-map-support": "^0.5.11",
    "tslint": "^5.15.0"
  },
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-typescript": "^7.3.3",
    "@types/react": "^16.8.12",
    "@types/react-dom": "^16.8.3",
    "electron": "^4.1.3",
    "electron-builder": "20.39.0",
    "electron-webpack": "^2.6.2",
    "electron-webpack-ts": "^3.1.1",
    "typescript": "^3.4.1",
    "webpack": "^4.29.6"
  }

Надеюсь, кто-нибудь подскажет...

Когда я заменю react-l18next на mobx-react-lite и использую наблюдатель, это вызовет тот же эффект.

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

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

Обратите внимание, что ошибка возникает только тогда, когда навигация не вызывает перезагрузку страницы.

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

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

output: {
    library: 'myLib',
    ...
}

А потом в скрипте загрузки проверил есть библиотека или нет:

if(!window.myLib){
    var bz = document.createElement('script');
    bz.type = 'text/javascript'; 
    bz.async = true;
    bz.src = 'https://path/to/bundle.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(bz, s);
}

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

Итак, у нас есть основное приложение React, использующее webpack.
Мы пытаемся создать небольшую библиотеку React, которая использует хуки, мы пробовали менять сборщики (parcel, pure babel, webpack).
При тестировании нашей реализации веб-пакета мы пометили react и react-dom как внешние, поэтому не будем включать их в наш бандл.
Мы по-прежнему получаем то же исключение хуков при использовании ссылки npm.

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

Мне трудно понять основную причину проблемы. Что создает дубликат экземпляра React?

Привет @adriene-orange, вы можете найти мой пост https://github.com/facebook/react/issues/13991#issuecomment -472740798 для получения дополнительных объяснений.

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

Самое простое и лучшее решение, которое мы находим для этого, находится в конфигурации веб-пакета (или других инструментов) вашего входного пакета, там есть что-то вроде resolve.modules , чтобы вручную установить пути и порядок путей, по которым веб-пакет будет искать модули. Exp., resolve: { modules: [path.resolve(PACKAGE_ROOT, 'node_modules'), 'node_modules'] } , заставит webpack сначала найти модули в node_module корневого пакета вашего входа. Если не удается найти модуль в корне, найдите его в соответствующей папке node_modules...

Итак, у нас есть основное приложение React, использующее webpack.
Мы пытаемся создать небольшую библиотеку React, которая использует хуки, мы пробовали менять сборщики (parcel, pure babel, webpack).
При тестировании нашей реализации веб-пакета мы пометили react и react-dom как внешние, поэтому не будем включать их в наш бандл.
Мы по-прежнему получаем то же исключение хуков при использовании ссылки npm.

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

Мне трудно понять основную причину проблемы. Что создает дубликат экземпляра React?

Привет, я получаю эту ошибку

Нарушение инварианта: неверный вызов ловушки. Хуки можно вызывать только внутри тела функционального компонента. Это может произойти по одной из следующих причин:
1. У вас могут быть несоответствующие версии React и рендерера (например, React DOM).
2. Возможно, вы нарушаете правила хуков
3. У вас может быть более одной копии React в одном приложении.
См. https://fb.me/react-invalid-hook-call советы о том, как отлаживать и устранять эту проблему.

   5 | 
   6 | const useApiHelper = (url, reducer) => {
>  7 |     const [state, dispatch] = useReducer(reducer, {});
     |                                                  ^
   8 | 
   9 |     useEffect(() => {
  10 |         fetch(url).then(res => res.json())

Пример кода https://stackblitz.com/edit/react-mbze9q

Когда я пытаюсь получить доступ к этой функции внутри тестовых случаев, я получаю ошибку выше

@abhishekguru Вы вызываете хук вне компонента здесь, в своем тесте:

test('API test', async () => {
  const newState = useAPIHelper( // <- Called outside of a component
    'https://jsonplaceholder.typicode.com/posts',
    reducer
  )
  console.log(newState, 'new');
  // expect(newState[samUrl].loading).toEqual(true);
});

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

Бессовестная вилка

@abhishekguru , если у вас есть общий хук, используемый между несколькими компонентами, и вы хотите протестировать его независимо от какого-либо конкретного компонента, вы можете рассмотреть возможность использования react-hooks-testing-library .

import { renderHook } from 'react-hooks-testing-library'

test('API test', async () => {
  const { result } = renderHook(() => useAPIHelper( // <- now called within a component
    'https://jsonplaceholder.typicode.com/posts',
    reducer
  ))

  console.log(result.current, 'new');
  // expect(result.current[samUrl].loading).toEqual(true);
});

Я хотел вмешаться, потому что у нас были проблемы только с SSR. Мы очищаем узел require.cache при изменении файла. Это эффективно дает горячую перезагрузку на сервере. Очистка узла require.cache вызовет проблемы с библиотеками, которые должны иметь единственную копию. Вот наше решение:

Object.keys(require.cache)
  .filter(key => !isSingleton(key)) // This is needed here because react cannot be deleted without causing errors
  .forEach(key => {
    delete require.cache[key]
  })

Наша функция isSingleton содержит список библиотек, которые должны иметь единственную копию. Хорошим эмпирическим правилом является определение любой библиотеки в peerDependencies

https://yarnpkg.com/lang/en/docs/dependency-types/#toc -peerdependencies

Тоже была такая же проблема и у меня

window.React1 = require('react');
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2); // true

также вернул true , перепробовал все предложенные варианты, но ничего не получилось. Наконец выяснилось, что:

Webpack автоматически добавляет тег script с bundle.js в index.html . Моя проблема заключалась в том, что я явно добавлял bundle.js в index.html , что раньше работало нормально до хуков.

Для меня проблема возникла после обновления babel 7, не было отдельных версий с реакцией npm ls. Удаление
«React-hot-loader/babel» из .babelrc временно устранил проблему.

Я пробовал все решения выше, но все равно получил ошибку.
В конце концов я обнаружил, что это было вызвано пакетом why-did-you-update , и для него есть связанная проблема . Просто подсказка для тех, кто использует аналогичный пакет, который модифицирует React.

Я смог исправить это в сценарии react-native + Yarn Workspaces .

В корне package.json

{
  "private": true,
  "workspaces": {
    "packages": [
      "packages/*"
    ],
    "nohoist": [
      "**/react-native",
      "**/react-native/!(react)/**"
    ]
  }
}

Это предотвращает поднятие кода react-native (что необходимо для нативного реагирования), в то же время поднимая react , таким образом, все общие модули используют один и тот же ответ.

В metro.config.js

module.exports = {
  watchFolders: [
    path.resolve(__dirname, '../', 'shared-module'), 
    // ...more modules
    path.resolve(__dirname, '../', '../') // to make sure the root `react` is also part of the haste module map
  ]
}

Конфигурация метро позволяет упаковщику знать, где что находится.

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

Я переключился с примера приложения (оригинальный способ тестирования компонента) на Storybook . При использовании сборника рассказов в проекте он не будет загружать React дважды, поскольку он будет использовать тот же, что и компонент. При использовании npm link у меня были проблемы с хуками и двойной загрузкой React, также я не смог заставить работать какое-либо из вышеперечисленных решений. Итак, Storybook решил мою проблему, и теперь у меня есть способ протестировать свой компонент в нескольких сценариях и в то же время создать для него интерактивную документацию.

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

Мы только начинаем с React. В моем случае мы начинаем с монорепозитория Lerna с пакетом библиотеки компонентов Neutrino и клиентским пакетом веб-приложения Neutrino. Веб-приложение использует продукт сборки библиотеки связанных компонентов. После некоторых экспериментов и получения true для одного и того же экземпляра React я нашел способ вообще исключить react и react-dom из сборки библиотеки компонентов.

Кажется, это обычное решение шаблона проектирования для библиотек компонентов веб-пакета, поэтому в библиотеке компонентов я добавил в конфигурацию веб-пакета:

"externals": {
  "react": "react",
  "react-dom": "react-dom"
}

Мне не нужно было помещать глобальный тег script в пакет веб-приложения для react и react-dom . Я предполагаю, что Webpack предоставляет их библиотеке компонентов в своей реализации require так же, как и веб-приложению.

другой причиной этой ошибки является неправильная настройка React Router Route ,

Это не удается :

<Route render={MyHookedComponent}/>

, но это удается :

<Route component={MyHookedComponent}/>

Например. вам нужно использовать component , а не render . Это легко допустить ошибку, поскольку render обычно отлично работает с компонентами на основе классов.

Я работал над biolerplate и хочу опубликовать его в npm, и разрабатывал с помощью npm link . Он работал правильно, но через некоторое время начал выдавать ошибки Invalid Hook call warning .
Я пытался использовать ссылку npm ../myapp/node_modules/react, но это не решает мою проблему,
И сравнил React1 === React2 правда как и npm ls react тоже сделал, показывает только один пакет.

И я также не использую веб-пакет, я просто добавляю некоторый слой вне приложения create-react-app, поэтому я не могу заставить свое приложение использовать локально установленный модуль реагирования.
Застрял с ним за последние 3 дня._

То же, что @hnagarkoti .

Я получил это предупреждение во время рендеринга на стороне сервера (SSR), потому что я использовал более старую версию react-apollo , поэтому просто хотел оставить эту ссылку здесь, чтобы помочь следующему бедолаге, который столкнется с этой проблемой:

https://github.com/apollographql/react-apollo/issues/2541

Короче говоря, getDataFromTree не поддерживает хуки реагирования до версии [email protected] .

У меня была такая же проблема, и я решил ее, добавив:

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

to свойство resolve в конфигурации веб-пакета моего основного приложения.

Очевидно, это была моя ошибка, когда я использовал две копии React, но я согласен, что было бы здорово, если бы сообщение об ошибке было лучше. Я думаю, что это может быть похоже на: # 2402

Любые предложения для этого с приложением create-реагировать?

^ Хорошо, решение, которое я выбрал, чтобы решить эту проблему для create-react-app, состоит в том, чтобы использовать react-app-rewired и custom-cra.

Вот мой config-overrides.js:

const {
    override,
    addWebpackAlias,
  } = require("customize-cra");

const path = require('path'); 

module.exports = override( 
    addWebpackAlias({
        react: path.resolve('./node_modules/react')
    })
)

Пример проекта: https://github.com/dwjohnston/material-ui-hooks-issue/tree/master

В нашей команде у нас есть универсальный навигационный компонент, работающий с десятками приложений, все эти приложения происходят от реакции 15.0.0 до реакции 16.8.0, чтобы включить навигацию, реализованную выше хуков, мы должны связать ее с последней реакцией

В этом случае наличие нескольких экземпляров реакции является для нас фундаментальным требованием, я хотел бы знать, готова ли официальная команда реагировать решить эту проблему в будущем?

@dwjohnston мой обходной путь для create-react-app состоял в том, чтобы создать конфигурацию веб-пакета для разработки. create-react-app внутренне использует webpack, webpack-dev-server и babel-loader, поэтому создание конфигурации webpack только для разработки было не так уж и плохо, потому что зависимости уже неявно существуют, но все равно требуется много накладных расходов. работает корректно.

У меня есть проблема с create-react-app : https://github.com/facebook/create-react-app/issues/6953 , чтобы добавить поддержку веб-пакета alias или что-то подобное.

👋 Если кто-то также использует create-react-app и испытывает эту боль, не могли бы вы поставить большой палец вверх по этой проблеме?

@ricokahler - Спасибо, что указали на это. Я рад видеть, что я не единственный человек с этой проблемой - я столкнулся с ней и в контексте.

Есть ли какие-либо известные вам ресурсы, на которых обсуждается этот вопрос?

Если вы в моей лодке, вы добавили пакет компонента реакции из локального каталога, и теперь он автоматически собирает и устанавливает его вместе со своей собственной копией node_modules (поскольку для этого используется ссылка npm), предоставляя приложение 2 копии или React now.

Я работал над этим, удалив node_modules//node_modules перед запуском приложения. Чтобы сделать это автоматически:

"prestart": "rimraf ./node_modules/<my_package>/node_modules"

Я также столкнулся с этим, когда делал SSR.
Если вы используете Lerna для локального тестирования вашей библиотеки React, вы можете добавить «react/react-dom/react-router» в качестве peerDependencies в вашей библиотеке, но вы не должны добавлять их в качестве devDependencies. (это делает его дублирующим)
Вы можете использовать node --preserve-symlinks , чтобы он мог искать родительский репо, который устанавливает peerDependencies.
Для шутки вам нужно добавить путь к родительскому репо в параметр «jest.moduleDirectories», чтобы Jest мог их разрешить.

@apieceofbart у меня работает, спасибо!

Я столкнулся с этой ошибкой при загрузке внешних компонентов React, например, с модулями JS. Они полностью вне проекта, загружаются с помощью динамического импорта () (ну, jsonp для дополнительной поддержки). Чтобы обойти эту проблему, мы передаем/внедряем React как свойство в каждый модуль. Это работает, но тогда каждый модуль зависит от содержащего его приложения React. Мы пытаемся удалить зависимости.

Как уже упоминалось, это свойство исключает возможность использования React для любого типа микроинтерфейса. Проблема в том, что существует побочный эффект создания глобального состояния в среде выполнения JS при импорте React для использования в качестве библиотеки.

Я понимаю, что для простых случаев использования этот побочный эффект означает, что React «проще в использовании». Но когда веб-страница состоит из нескольких сценариев из нескольких шагов пакета, один из них должен иметь возможность настроить React (выполнить этот побочный эффект явно), а другие могут просто вызывать библиотечные функции.

У меня все еще есть проблема с react-bootstrap: # https://github.com/react-bootstrap/react-bootstrap/issues/3965

Для тех, кто застрял, пытаясь создать библиотеку для React, попробуйте https://github.com/whitecolor/yalc , это работает намного лучше, чем символические ссылки.

@mpeyper работает хорошо. Спасибо

@apieceofbart Это сработало для меня. Спасибо за предложение. 👍

Для меня эта проблема возникла, когда я перешел в каталог своего проекта в PowerShell и не использовал имя каталога в пути с заглавной буквы. Я создал проект в users/…/… вместо Users/…/…
Проблема была решена, когда я исправил ошибки капитализации и воссоздал проект.

Для меня делают:

    "react": "file:../my-library/node_modules/react",
    "react-dom": "file:../my-library/node_modules/react-dom",

Исправлена ​​большая часть этого, но этого было недостаточно, я продолжал получать ошибку hooks can only be called inside the body of a function component .

Оказывается, это произошло из-за того, что некоторые компоненты моей библиотеки экспортировались следующим образом:

export default Radium(withTranslation()(MyComponent))

:Икс:

Где withTranslation — HOC из react-i18next, а Radium — HOC из Radium.

И экспортировать их так:

export default withTranslation()(Radium(MyComponent))

:heavy_check_mark:
Все исправил.

Обратите внимание, что react-i18next был в версии 10, которая использует React Hooks.

@mikeaustin У нас такая же проблема. У вас есть пример «передачи/внедрения React как свойства в каждый модуль»?

Все еще возникает эта проблема, перепробовал все шаги:

• рабочие пространства пряжи (через lerna)
• проверено, есть ли одно реагирование, да

Некоторые вещи, которые могут повлиять:

• использование веб-пакета с libraryTarget
• используя машинописный текст

$ npm ls react-dom
/xxx
└── [email protected]

$ npm ls react
/xxx
└── [email protected]

корневой пакет.json

{
  ...
  "workspaces": [
    "packages/*",
  ],
  "devDependencies": {
    ...
  },
  "dependencies": {
    "react": "16.8.6",
    "react-dom": "16.8.6"
  },
  "resolutions": {
    "react": "16.8.6",
    "react-dom": "16.8.6",
    "**/react": "16.8.6",
    "**/react-dom": "16.8.6"
  }
}

@JeremyGrieshop У меня была такая же проблема, и это сработало для меня, спасибо.

Добавьте «prestart» в ваш package.json, как показано ниже:

"scripts": {
    "prestart": "rimraf ./node_modules/<my package>/node_modules",
    "start": "react-scripts start",
    "build": "react-scripts build",
  },

У меня была эта проблема, и это было не из-за нескольких версий реакции / реакции-дома.
В пользовательских инструментах, которые я использую, кеш запросов очищался (для целей, выходящих за рамки этого обсуждения), например:

Object.keys(require.cache).forEach((key) => {
      delete require.cache[key];
    });

Итак, к сведению людей, если вы делаете что-то подобное - это повлияет на React Hooks, поэтому избегайте этого, если можете.

У меня была такая же проблема, и я решил ее, добавив:

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

to свойство resolve в конфигурации веб-пакета моего основного приложения.

Очевидно, это была моя ошибка, когда я использовал две копии React, но я согласен, что было бы здорово, если бы сообщение об ошибке было лучше. Я думаю, что это может быть похоже на: # 2402

Для тех, кто использует Parcel, если dist находится там, где находятся ваши скомпилированные файлы, вы должны добавить:

  "alias": {
    "react-mediator": "./dist"
  },

На ваш package.json , а затем вы все еще можете link (npm или yarn) библиотеку для локальной разработки/тестирования.

@mikeaustin У нас такая же проблема. У вас есть пример «передачи/внедрения React как свойства в каждый модуль»?

Вы можете использовать React Context, чтобы обойти сам «React», и создать HoC для внедрения свойства в каждый компонент. Вы можете передать что угодно в API, например, api.React, но становится немного сложнее оборачивать HoC вокруг этих компонентов (поскольку теперь они доступны только внутри компонента, недоступны для экспорта.

const withReact = Component = props => (
  <ReactContext.Provider value={api => <Component api={api} {...props} /> } />
)

Я трачу на это пару часов, если изменить исходный код, чтобы изменить сообщение об ошибке и добавить в него дополнительную информацию, непросто, и вам нужно больше времени, по крайней мере, добавьте это примечание в документ ,

_p.s: у реакции отличная документация, но я думаю, что эта страница нуждается в проверке._

@ОливерРадини

Я смог исправить это, обновив react-hot-loader до ^4.6.0

Мааан, это исправило это.
@gaearon @theKashey Как насчет того, чтобы добавить это на https://reactjs.org/warnings/invalid-hook-call-warning.html , чтобы люди не тратили свое время впустую из-за более старой версии react-hot-loader ?

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

Привет, я использую React как в приложении, так и в библиотеке . Я использую библиотеку внутри приложения. Мне удалось исправить проблему с двумя экземплярами реакции, используя:

В конфигурации веб-пакета приложения :

    alias: { react: path.resolve( '__dirname', '..',  'node_modules', 'react' ) // Adapt this to match your file tree

В конфигурации веб-пакета библиотеки

  externals: {
    react: 'react', // Case matters here
    'react-dom': 'react-dom' // Case matters here
  }

Итак, я столкнулся с проблемой вызова хуков из нетранспилированного файла (*.js):

index.js :

import ReactDOM from 'react-dom';
import './index.css';
import App from './app';

ReactDOM.render(App(), document.getElementById('root'));

app.jsx

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const BaseContext = React.createContext();

const initialState = {
  woo: true
};

const reducer = (state, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

const Home = () => <h1>You're at home.</h1>;

const App = () => {
  // eslint-disable-next-line
  const [state, dispatch] = React.useReducer(reducer, initialState);
  return (
    <Router>
      <BaseContext.Provider value={initialState}>
        <BaseContext.Consumer>
          <div className="welcome">
            <nav>
              <ul>
                <li>
                  <Link to="/">Home</Link>
                </li>
              </ul>
            </nav>
            <header className="header">
              <h1>Welcome!</h1>
            </header>
            <Route path="/" exact component={Home} />
          </div>
        </BaseContext.Consumer>
      </BaseContext.Provider>
    </Router>
  );
};
export default App;

Любой совет, если предположить, что это не «Переместить его в файл JSX и перенести»?

Кажется, у меня ничего не работает, я использую смесь стимула и реакции, у меня есть гибридное приложение, я начал использовать хуки, и оно потерпело неудачу, как только я начал добавлять турбоссылки :(

Редактировать: на данный момент я решил свою проблему, добавив data-turbolinks-track="reload" data-turbolinks-eval="false" в теги сценария, которые я использую, так что это должно сделать это сейчас

у меня тот же вопрос, через 4 часа я обнаружил, что утилита jenkins отсутствовала для преобразования файлов .babelrc на сервер。。。

Почему это может создать ошибку?

$ npm ls react
[email protected] /mnt/g/development/javascript/pow-vehmain
└── [email protected]`

Invalid hook call...
ServiceVisitMaintenance
src/components/ServiceVisit/ServiceVisitMaintenance.js:6
  3 | import { ServiceVisitForm } from './ServiceVisitForm';
  4 | 
  5 | const data = [{ id: 1, description: 'Ford' }, { id: 10, description: 'Edsel' }];
> 6 | const ServiceVisitMaintenance = () => {
  7 |   const [vehicleList, setVehicleList] = useState([]);
  8 |   return (
  9 |     <div>

ServiceVisitMaintenance.js:

import React, { useState } from 'react';
import { ServiceVisitForm } from './ServiceVisitForm';
const data = [{ id: 1, description: 'Ford' }, { id: 10, description: 'Edsel' }];
const ServiceVisitMaintenance = () => {
  const [vehicleList, setVehicleList] = useState([]);
  return (
    <div>
      <ServiceVisitForm vehicleList={data} />
    </div>
  );
};

export { ServiceVisitMaintenance };

Пожалуйста, проверьте, какая у вас версия react-dom.

$ npm ls реакция-дом
[email protected] /mnt/g/development/javascript/pow-vehmain
└── реакция-дом@16.8.6

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

Нет, это была моя грубая ошибка. Подпрограмма, которая вызывала это, использовала react-router-dom и использовала свойство рендеринга, а не компонент.

У кого-нибудь из вас была такая же проблема, но с Гэтсби?

Я получаю следующий результат после того, как я «реагирую на npm ls»:

и «npm ls react-dom»

Сначала я подумал, что случайно установил реагировать глобально, после глобального удаления ничего не изменилось. Затем я попытался создать совершенно новый проект в другом каталоге, 'gatsby new random-name', и добавил крошечную функцию (добавить комментарии, следуя по ссылке https://www.youtube.com/watch?v=asrdFuAxPaU&feature=youtu). .be) в gatsby-starter-default, чтобы проверить, будет ли ошибка воспроизводиться сама собой. Что ж, к моему огорчению, так оно и было!

Любой совет будет хорошо воспринят разочарованным плебеем.

Я все еще сталкиваюсь с этой проблемой в сборнике рассказов. Является ли этот вывод из npm ls правильным или нет?

В моем случае проблема была вызвана модулем why-did-you-update .

Используйте рабочую область и монорепозиторий lerna и поднимите пакет. это решит проблему.

у нас такая же проблема с SSR. похоже, это работает, установив externals: [“react”] в нашей конфигурации веб-пакета, а затем вручную загрузив react/umd/react.development.js . это боль, однако, и хотелось бы найти более простой способ.

Хорошо, надеюсь, это кому-нибудь поможет. Мы несколько раз случайно загружали webpack runtime.js, что приводило к существованию нескольких копий React. Убедитесь, что вы загружаете runtimeChunk (runtime.js) только один раз.

Если у вас есть проблема с тестами Jest, как у меня, это то, что, кажется, решает ее для меня.
Добавьте это в свой jest.config.js

moduleNameMapper: {
    '^react$': '<rootDir>/node_modules/react/'
  }

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

Я нашел другую причину проблемы и решение для нее.

Моя среда electron и webpack , но это может помочь и людям, не работающим с электроникой. Я провел мучительные дни, пытаясь решить, почему я получаю это сообщение об ошибке после обновления до React 16.9 (и React DOM 16.9).

В моем случае у меня было два React в приложении, но я не смог найти две физические библиотеки в node_modules, даже не используя npm ls react . Я даже использовал webpack-bundle-analyzer , чтобы посмотреть, что внутри пакета.

В конце концов я обнаружил, что физически у меня нет двух реакций в проекте, но React и React DOM дважды упоминались/загружались в файле HTML . Это можно легко проверить, добавив, например, console.log("React load") в index.js библиотеки React.

Настоящий источник был подключен к electron-webpack . react и react-dom не были помечены как внешние , поэтому были загружены в комплекте, а позже из node_modules из-за необходимости использования в каком-то другом модуле.

Решение было таким же простым, как добавление этих строк в webpack.renderer.config.js :

module.exports = {
    externals: [
        "react",
        "react-dom"
    ],
};

Итак, если кто-то здесь использует посылки.js, по какой-то странной причине мне удалось обойтись следующим импортом: import React from 'React'; , и как только я начал использовать хуки реагирования, я получил ошибку нарушения инварианта, не понимая, что это было потому что я неправильно импортировал, используя from 'React' вместо from 'react' . Упс.

У кого-нибудь из вас была такая же проблема, но с Гэтсби?

Я получаю следующий результат после того, как я «реагирую на npm ls»:

и «npm ls react-dom»

Сначала я подумал, что случайно установил реагировать глобально, после глобального удаления ничего не изменилось. Затем я попытался создать совершенно новый проект в другом каталоге, 'gatsby new random-name', и добавил крошечную функцию (добавить комментарии, следуя по ссылке https://www.youtube.com/watch?v=asrdFuAxPaU&feature=youtu). .be) в gatsby-starter-default, чтобы проверить, будет ли ошибка воспроизводиться сама собой. Что ж, к моему огорчению, так оно и было!

Любой совет будет хорошо воспринят разочарованным плебеем.

Да, я столкнулся с той же проблемой, что и вы. Я последовал совету здесь... ,

// Add this in node_modules/react-dom/index.js
window.React1 = require('react');

// Add this in your component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2);

Я добавил React2 в индексный файл под страницами. Он возвращает ложь.

Дедупликация означает, что npm должен был дедуплицировать зависимость, см. здесь...

Один и тот же пакет не нужно устанавливать дважды! Это просто ссылка.

Кроме того, он перемещает пакеты «вверх по дереву» (выравнивает дерево). Это имеет смысл, так как в противном случае одному пакету пришлось бы искать в node_modules какого-то другого пакета (что было бы довольно беспорядочно), и это помогает упростить зависимости.

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

Хотя очевидно, что дедупликация не сработала.

Что вы пробовали?

Я получаю эту ошибку при попытке сборки с помощью NextJS. Некоторые компоненты используют material-ui, и проблема исчезнет, ​​если я их удалю. Я не использую стилизованные компоненты. Я безуспешно пытался удалить node_modules и т. д. Я безуспешно пытался добавить псевдонимы и разрешения для react в файл next.config.js и package.json. Я использую react 16.8.6, react-dom 16.8.6 и next 9.0.4. npm ls говорит, что есть только один из каждого. Я не использую никаких ссылок npm.

Репозиторий: https://github.com/dancancro/questions/tree/invalid-hook-call

Codesandbox находится здесь: https://codesandbox.io/s/github/dancancro/questions/tree/invalid-hook-call/?fontsize=14 .

Stackoverflow: https://stackoverflow.com/questions/57647040/nextjs-invalid-hook-call-hooks-can-only-be-call-inside-of-the-body-of-a-fun

Ошибка здесь: https://gist.github.com/dancancro/2dfafb053aaaedfade406fd4f67eb68a
... render -> renderToString -> ReactDOMServerRenderer.read -> ReactDOMServerRenderer.render -> Object.WithStyles [как рендеринг] ...

Ошибочный хук — это вызов useStyles() в строке 17428 следующего файла в функции withStyles . Найдите «var class = useStyles (реквизит)». Проблема заключается в коде, сгенерированном nextjs. Код, который я написал, не использует withStyles , какие-либо хуки или функции, начинающиеся с «use*».

https://raw.githubusercontent.com/dancancro/questions/invalid-hook-call/.next/static/development/pages/index.js

ОБНОВЛЕНИЕ: удаление этого из моего next.config.js решило проблему:

    webpack: config => {
        config.externals = [
            '/'
        ]
        return config
    },

Я нашел обходной путь, удалив react и react-dom из папки моего связанного пакета node_modules .

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

Вот обходной путь:

• Пакет A: пакет кода вашей библиотеки был npm link 'd
• Пакет B: пакет кода вашего приложения. Имеет символическую ссылку в вашей папке node_modules для пакета A

1. Соберите пакет A. Mine выводит свои активы на dist/ , включая node_modules
2. В распределенной папке node_modules пакета A удалите react и react-dom
3. ???
4. Выгода!

Обратите внимание, что я установил одну и ту же версию React в обоих пакетах. Вам придется перезапустить все запущенные процессы.

У меня работает удаление несовместимых why-did-you-update . (https://github.com/maicki/why-did-you-update/issues/52)

несовместимо, почему-вы-обновили

Использование @bertho-zero может использовать новые инструменты разработки или мой хук useWhyDidYouUpdate

@brunolemos Это здорово, но более ограничивающе, потому что вы должны поместить его в каждый компонент.

Решение @ dmart914 решило проблему для меня. У меня тоже есть связанные пакеты, так что я могу протестировать свою библиотеку, не публикуя изменения... кто-нибудь нашел обходной путь для этого? Публиковать библиотеку с открытым исходным кодом и документировать удаление определенных пакетов NPM, чтобы хуки волшебным образом начали работать, — не лучший опыт...

Решение по удалению модуля связанного пакета react не работает, если в этом пакете есть тесты, требующие react (например, @testing-library/react или @testing-library/react-hooks ), поэтому Похоже, нам все еще нужен лучший способ справиться с этим.

Моя заявка состоит из двух частей. Основное веб-приложение и модуль, который динамически загружается в веб-приложение. И веб-приложение, и модуль используют React 16.9.0.
Модуль загружается в веб-приложение с помощью оператора React.lazy() и динамического импорта().
При загрузке модуля выдается ошибка "Неверный вызов хука".

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

1. Добавление псевдонима в webpack.config модуля, который указывает на реакцию основного приложения, как это было предложено apieceofbart.
   псевдоним: {
   реагировать: path.resolve('../../node_modules/реагировать')
   }

2. Пытался указать зависимости реакции в package.json модуля на основное приложение.
   "зависимости": {
   "react-dom": " файл:../common/node_modules/react-dom ",
   "реагировать": " файл:../common/node_modules/реагировать "
   }

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

Основываясь на некоторых ответах выше, вот что сработало для меня:

1. Добавлено следующее в config/webpack.config.js

externals: {
  react: {
    root: 'React',
    commonjs2: 'react',
    commonjs: 'react',
    amd: 'react'
  },
  'react-dom': {
    root: 'ReactDOM',
    commonjs2: 'react-dom',
    commonjs: 'react-dom',
    amd: 'react-dom'
  }
}

1. Отредактировано package.json

"devDependencies" : {
  ...
  "react": "^16.9.0",
  "react-dom": "^16.9.0",
}

"peerDependencies": {
  "react": "^16.9.0",
  "react-dom": "^16.9.0"
}

1. Отредактировано public/index.html

<head>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
...

После этого я смог запускать хуки в своей библиотеке, используя React, загруженный из CDN, в то время как Jest все еще загружал копию реакции из node_modules (установленной из devDependencies).

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

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

попробуйте использовать компонент более высокого порядка в этом случае

импортировать React из «реагировать»;
импортировать PropTypes из 'prop-types';
импортировать { withStyles } из '@material-ui/styles';
импортировать кнопку из '@material-ui/core/Button';

константные стили = тема => ({
корень: {
фон: 'линейный градиент (45 градусов, #FE6B8B 30%, #FF8E53 90%)',
граница: 0,
границаРадиус: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
белый цвет',
рост: 48,
отступ: '0 30px',
},
});

класс HigherOrderComponent расширяет React.Component {

оказывать(){
const {классы} = this.props;
вернуть (
Компонент высшего порядка
);
}
}

HigherOrderComponent.propTypes = {
классы: PropTypes.object.isRequired,
};

экспорт по умолчанию со стилями (стили) (HigherOrderComponent);

Я использую Yarn и исправил это, задав разрешение в моем package.json :

  "resolutions": {
    "**/react": "16.7.0-alpha.2",
    "**/react-dom": "16.7.0-alpha.2"
  },

Вы добавили в родительский или дочерний пакет?

Основываясь на некоторых ответах выше, вот что сработало для меня:

1. Добавлено следующее в config/webpack.config.js

externals: {
  react: {
    root: 'React',
    commonjs2: 'react',
    commonjs: 'react',
    amd: 'react'
  },
  'react-dom': {
    root: 'ReactDOM',
    commonjs2: 'react-dom',
    commonjs: 'react-dom',
    amd: 'react-dom'
  }
}

1. Отредактировано package.json

"devDependencies" : {
  ...
  "react": "^16.9.0",
  "react-dom": "^16.9.0",
}

"peerDependencies": {
  "react": "^16.9.0",
  "react-dom": "^16.9.0"
}

1. Отредактировано public/index.html

<head>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
...

После этого я смог запускать хуки в своей библиотеке, используя React, загруженный из CDN, в то время как Jest все еще загружал копию реакции из node_modules (установленной из devDependencies).

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

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

Я работаю над многоразовой библиотекой, которая содержит компоненты, использующие хуки. Мне нужно протестировать их в реальных проектах, прежде чем публиковать. Единственное решение для этого — использовать yarn|npm link . Я связываю библиотеку с помощью rollup и могу убедиться, что в комплекте нет версии react. Когда я связываю (веб-пакет) приложение, которое использует библиотеку, появляется ошибка/проблема. Это происходит для голых приложений create-react-app и next.js . Оба фреймворка используют webpack в фоновом режиме.

Кто-нибудь уже нашел надежное решение?

Полностью отказавшись npm|yarn link , я смог решить проблему. Вместо этого я использую эту прекрасную библиотеку, которая не зависит от структуры вашего проекта. Это также позволяет вам продолжать использовать webpack в качестве сборщика, поэтому вам не нужно объявлять _react_ и _react-dom_ как external или alias . К сожалению, он вводит в проект несколько новых каталогов и файлов блокировки, но, эй, он работает... локально и даже внутри наших контейнеров докеров.

Возможно, это будет немного полезно:

Связь

@GabrielBB спасибо, это работа для меня

@dmart914 спасибо! Пока единственный обходной путь, который работает для меня :)

В настоящее время получаю предупреждение React Invalid Hook Call при использовании минимальной простой настройки.

Этот функциональный компонент:

1. Использует одну и ту же версию для React и ReactDOM.
2. Соблюдает правила хуков.
3. Имеет только одну копию React.

__Зависимости__
реагировать @ 16.10.1
реакция-дом @ 16.10.1
веб-пакет@4.41.0
веб-пакет[email protected]

И запустить webpack test.js -o main.js для сборки.

Я ожидаю, что этот файл:

• Рендерим коробку.
  
  
  
  • Приостановите отладчик перед вызовом React.useState .
  
  
  • Создайте логическое значение test и обновите обратный вызов updateTest .
  
  
  • Выдает ошибку React.
  
  
  • При рендеринге выполните обратные вызовы React.useEffect .
  
  
  • Выдает ошибку React.
  
  

Я что-то делаю не так, или что-то еще происходит?

// test.js
import React, { createElement as el } from 'react';
import ReactDOM from 'react-dom'; 

function Item() {
  debugger;
  const [test, updateTest] = React.useState(false); // Throws React error.

  React.useEffect(function checkTest() { // Throws React error.
    console.log("checking test", test);
  }, [test]);

  React.useEffect(function tester() { // Throws React error.
    if (!test) {
      setTimeout(() => {
        console.log("changing value for test");
        updateTest(true);
      }, 1000);
    }
  }, [test]);

  return el('div', {style: {width: '300px', height: '300px', 'background-color': 'green', border: '1px solid red'}});
}

function render() {
  let root = document.querySelector('#primary');
  if (!root) {
    root = document.createElement('div');
    document.body.appendChild(root);
  }

  ReactDOM.render(Item(), root);
}

render();

Вы забыли создать элемент. Вы синхронно вызываете Item() до того, как достигнете вызова ReactDOM.render . Вам нужно пройти el(Item) .

Истинный! Спасибо Вам за информацию.

Нахожусь в такой же ситуации, как и некоторые другие комментаторы. Я использую webpack для переноса некоторых реагирующих компонентов (некоторые из которых используют хуки) и помещаю перенесенный код в папку lib . Я добавил реагировать на поле externals конфигурации веб-пакета, чтобы оно не связывалось с кодом компонента. Я хотел бы использовать эти компоненты в двух отдельных проектах — эти компоненты являются общими для них, поэтому мы хотели бы разрабатывать их в одном месте и чтобы обновления отражались в обоих приложениях.

Если зависимость добавляется с помощью common-components: file:../../common-components/lib в package.json, то компоненты загружаются отлично, однако запуск веб-пакета не обновляет компоненты немедленно — вместо этого я должен запустить yarn upgrade common-components , а затем перезапустить сервер разработки.

Если зависимость добавлена ​​​​с использованием common-components: link:../../common-components/lib , то повторный запуск веб-пакета обновит файлы в основном приложении node_modules (поскольку теперь он использует символическую ссылку), но я получаю указанную выше ошибку нескольких экземпляров реагировать. Я предполагаю, что теперь он использует версию реакции в папке common-components/node_modules .

Есть ли способ использовать символические ссылки (например, common-components: link:../../common-components/lib ), а также убедиться, что связанные компоненты используют реакцию, найденную в папке node_modules основного приложения? Поскольку я планирую использовать эти компоненты в обоих приложениях, я не могу связать пакет реагирования из одного из них с общей библиотекой компонентов, и я хотел бы избежать связывания обоих основных приложений с реакцией, используемой в пакете общих компонентов. Я видел некоторые комментарии, относящиеся к полю webpack resolve , которое звучит многообещающе, но я не могу заставить его работать. Любая помощь будет принята с благодарностью!

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

Одним из быстрых обходных путей было бы не публиковать пакет, а просто отправить его на github и импортировать в свой проект, используя yarn add <git-url> .

Одним из быстрых обходных путей было бы не публиковать пакет, а просто отправить его на github и импортировать в свой проект, используя yarn add <git-url> .

Причина, по которой многие из нас используют относительные пути npm link и npm package, заключается в разработке и тестировании кода без необходимости публиковать изменения в NPM или GitHub до того, как мы узнаем, что он будет работать.

Мы столкнулись с этой проблемой, связанной с https://github.com/facebook/react/issues/13972#issuecomment -447599035, поскольку я думаю, что это также может быть вызвано сервером узла Webpack. Нашим вариантом использования был интеграционный тест, запущенный в Jest, который программно запускал webpack() для сборки сервера перед выполнением тестов. Я считаю, что проблема связана с тем, как ESM и CJS могут существовать одновременно.

Возьмите этот пример, например:

// node express server, doing server-rendering
import React from 'react';
import { ApolloProvider } from '@apollo/react-common';
import { renderToStringWithData } from '@apollo/react-ssr';

res.send(await renderToStringWithData(<ApolloProvider><App /></ApolloProvider>)

Во время сеанса отладки я вижу, что мы можем получить два разных экземпляра React в скомпилированной версии этого файла:

_react: {Children, ...}
_react2: {default: {Children, ...}

Где
_react из ESM import React from 'react' в этом файле
_react2 от CJS var _react = _interopRequireDefault(require("react")); изнутри node_modules/@apollo/react-ssr/lib/react-ssr.cjs.js

Я считаю, что это привело к тому, что ссылка на React не совпадала в двух местах (файл рендеринга сервера и внутри пакета @apollo/react-ssr ) и, таким образом, вызвала ошибку.

Мы обнаружили, что это, вероятно, было вызвано программным использованием webpack() внутри теста, и преобразовали эти тесты в сквозные. Урок для нас в том, что если проблема возникает только в тестовом коде, у вас могут быть слишком сложные тесты.

Мне удалось решить это с помощью пряжи:

cd на myApp/node_modules/react и yarn link

затем в своей библиотеке запустите yarn link react

Теперь ваша библиотека использует ту же самую версию реакции, что и ваше основное приложение.

Я пытался установить реакцию как одноранговую зависимость в моей библиотеке, но тогда библиотека не собиралась

Как это можно исправить с помощью create-react-app без извлечения или переключения на yarn ?

Вы можете просто использовать ту же технику, используя ссылку npm. Нет необходимости в извлечении.

Связывание react — не лучшая идея, когда вы работаете над несколькими проектами с разными версиями.

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

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

Мое приложение работало, но в одном компоненте я вообще не мог добавить useState. причина заключалась в том, что я использовал компонент внутри метода рендеринга реагирующих маршрутизаторов без функции более высокого порядка, например:
<Route exact path="/path" render={ ComponentCausingTheErrorMesage }/>
переключение на
<Route exact path="/path" component={ ComponentNowWorkingAgain }/>
исправил это для меня

Я использовал npm link между приложением и модулем, над которым я активно работал, и мне пришлось это исправить, связав react и react-dom приложения с модулем, а затем связав модуль к приложению:

в приложении:

1. cd node_modules/react && npm link
2. то же самое для react-dom

в модуле:

1. npm link react && npm link react-dom
2. npm link

в приложении:

1. npm link [module-name]

Надеюсь, это поможет кому-то

У нас были хуки, работающие на стороне клиента, но мы сталкивались с этой ошибкой на SSR. Мой коллега решил это с помощью следующего в нашей конфигурации веб-пакета на стороне сервера:

const nodeExternals = require('webpack-node-externals');

const serverConfig = () => {
  // lots of config, then:
  externals: [
    nodeExternals({
      modulesFromFile: true,
    }),
  ],
}

Мне удалось решить это с помощью пряжи:

cd на myApp/node_modules/react и yarn link

затем в своей библиотеке запустите yarn link react

Теперь ваша библиотека использует ту же самую версию реакции, что и ваше основное приложение.

Я пытался установить реакцию как одноранговую зависимость в моей библиотеке, но тогда библиотека не собиралась

Это работает просто красиво

Просто столкнулся с этой проблемой при одновременном использовании electronic-webpack, react и material-ui. Когда я пытаюсь использовать что-либо из material-ui - я получаю эту ошибку (например, попробуйте использовать компонент или использовать).
Ошибка возникает в компонентах из material-ui.
Есть решения для моего случая?

Привет, ZVER3D, попробуй прочитать мой предыдущий комментарий . Надеюсь, поможет!

Я использовал npm link между приложением и модулем, над которым я активно работал, и мне пришлось это исправить, связав react и react-dom приложения с модулем, а затем связав модуль к приложению:

в приложении:

1. `cd node_modules/react && npm link`

2. same for `react-dom`

в модуле:

1. `npm link react && npm link react-dom`

2. `npm link`

в приложении:

1. `npm link [module-name]`

Надеюсь, это поможет кому-то

Милый малыш Моисей, это мне очень помогло. Даже не рассматривал проблему в разных версиях реакции!! Я создаю компонент локально для публикации в NPM, но у меня есть отдельный проект для его локального тестирования с использованием ссылки npm. Очевидно (сейчас) они оба используют разные версии реакции. О!

Привет, ZVER3D, попробуй прочитать мой предыдущий комментарий . Надеюсь, поможет!

Спасибо, что указали мне правильное направление. Другим решением было добавить библиотеку пользовательского интерфейса, которую я использую, в «whiteListedModules». Единственная проблема будет заключаться в том, что вам придется делать это для всех модулей, которые требуют реакции на компиляцию.
Итак, в package.json я написал следующее:

"electronWebpack": {
    "whiteListedModules": [
      "@material-ui/core",
      "@material-ui/icons"
    ]
  }

Я разрабатываю приложение React, используя подход монорепозитория. У меня есть основное приложение ( brush ) и компонент библиотеки реагирования ( react-gbajs ).

Поэтому, когда я пытаюсь отобразить свой компонент react-gbajs , у меня появляется эта ошибка о нескольких экземплярах React. Если я скопирую и вставлю тот же код на brush , у меня не будет никаких проблем.
Я использовал много подходов, чтобы исправить это, но ни один из них не решил проблему (изменение сборки в Webpack, рабочее пространство Yarn, ссылка npm...)

Я попытался выполнить отладку, чтобы проверить, действительно ли у меня есть две копии ОС React (используя console.log(window.React1 === window.React2) из документа React), но он оценивается как true !
( ОЧЕНЬ ПЛОХОЕ обходное решение, которое я использую сейчас, - это передать хуки в качестве реквизита: <GBAEmulator useEffect={useEffect} /> ... но я действительно не хочу его объединять)

У кого-нибудь есть идеи, как это исправить?

Мой проект с открытым исходным кодом, и я добавляю этот новый компонент библиотеки реагирования в эту ветку: https://github.com/macabeus/klo-gba.js/blob/ac18f4d42b122c333622f502947135c2de217ce2/react-gbajs/src/index.js#L251 -L274

Всем привет,

У меня есть приложение (myApp), которое использует в качестве зависимости пользовательскую библиотеку (myDepPackage). Оба они используют webpack в качестве инструмента сборки, и, конечно же, у меня была такая же ошибка. Ни одно из вышеперечисленных решений не сработало для меня. Что он сделал, так это заставил веб-пакет НЕ включать реакцию в окончательный пакет пользовательской библиотеки (myDepPackage). Единственная строка конфигурации, которую мне пришлось добавить в конфигурацию веб-пакета (из myDepPackage), приведена ниже:

externals: {
  react: "react",
},

Вы можете узнать больше о опции «внешние» здесь: https://webpack.js.org/configuration/externals/#externals

@tsevdos Ооочень спасибо!!! ❤️
Это решило мою проблему, о которой я сказал в предыдущем комментарии.

Для нас проблема заключалась в том, что у нас есть встраиваемое приложение React, которое загружается на страницу из шорткода WordPress и монтируется в div со случайным идентификатором. На некоторых страницах у нас есть несколько встроенных приложений, и они работали нормально, пока мы не начали использовать хуки.

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

Звучит просто и очевидно, но понять было сложно! Особенно потому, что он делал это и работал нормально, пока мы не добавили хуки.

Интересно, что на некоторых страницах у нас есть другие — другие — приложения, которые мы встраиваем, которые также используют хуки, и они тоже загружают свой собственный скрипт/сборку с помощью React... но тогда это работает просто отлично! Проблема заключалась в том, что одна и та же сборка загружалась более одного раза, и они использовали хуки .

Что сработало для меня, так это комбинация двух предложений из этой темы.

Конфигурация веб-пакета основного приложения ( предложение @apieceofbart )

  resolve: {
    alias: {
      react: resolve('./node_modules/react')
    }
  }

Конфигурация веб-пакета зависимости ( предложение @tsevdos )

  externals:
    react: 'react'
  }

У меня была эта проблема с html-webpack-plugin , и я использовал index.html , выглядящий как настройка от template до HtmlWebpackPlugin .

// webpack.config.js
plugins: [
   new HtmlWebpackPlugin({
      template: "./public/index.html"
   })
],

<!-- public/index.html -->
<html>
<head>
    <title>React App</title>
</head>
<body>
    <div id="root"></div>
    <script src="main.js"></script>
</body>

</html>

Я понял, что плагин вводил <script type="text/javascript" src="main.js"></script> сразу после <div id="root"></div> .

Итак, когда я открыл инструмент разработчика и сгенерированный html выглядел так.

<html>
<head>
    <title>React App</title>
</head>
<body>
    <div id="root"></div>
    <script src="main.js"></script>
    <script type="text/javascript" src="main.js"></script> <!-- injected from html-webpack-plugin -->
</body>

</html>

Для меня это вызывало Invalid Hook Call Warning .

Мне удалось удалить предупреждение, удалив <script src="main.js"></script> , как показано ниже.

<!-- public/index.html -->
<html>
<head>
    <title>React App</title>
</head>
<body>
    <div id="root"></div>
</body>

</html>

Я надеюсь, что это поможет кому-то найти решение!

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

https://github.com/emotion-js/emotion/issues/1470

Привет,

Возможное решение без извлечения — это смешивание решения по настройке псевдонима webpack с библиотеками custom- cra и react -app-rewired . Таким образом, вы можете переопределить только необходимую конфигурацию веб-пакета для решения проблемы, создав файл config-overrides.js с:

const { override, addWebpackAlias } = require('customize-cra');
const path = require('path');

module.exports = override(
  addWebpackAlias({
    react: path.resolve(path.join(__dirname, './node_modules/react')),
  }),
);

У меня была эта проблема на сайте Gatsby, я запустил npm install и обновился до последней версии Gatsby, и все это исправлено.

Если у вас возникли проблемы с запуском шутливого тестирования yarn or npm test (как было у меня) и вы используете react-test-renderer , убедитесь, что react-test-renderer соответствует той же версии react ты используешь.

Пример:

// Package.json
{
  ...
    "react" : "16.8.3",
  ...
}

Выполнить yarn add [email protected]

У меня есть библиотека, и я проверил все версии react и react-dom как в библиотеке, так и в основных проектах. они точно такие же, но не работали.
Однако решение @apieceofbart сработало для меня.

@apieceofbart , ты спас мой день <3

Что сработало для меня, так это комбинация двух предложений из этой темы.

Конфигурация веб-пакета основного приложения ( предложение @apieceofbart )

  resolve: {
    alias: {
      react: resolve('./node_modules/react')
    }
  }

Конфигурация веб-пакета зависимости ( предложение @tsevdos )

  externals:
    react: 'react'
  }

То же самое. Мне нужно сделать оба этих исправления, чтобы заставить его работать. Мое объяснение состоит в том, что вторая конфигурация указывает зависимости использовать внешнюю реакцию с именем «реагировать», а первая конфигурация указывает имя «реагировать» на папку «node_modules/react» в основном репозитории. Следовательно, оба они необходимы, чтобы заставить работать мост реакции.

Тем не менее, кажется, что для некоторых людей достаточно одного из них, что я не очень понимаю.

Что сработало для меня, так это комбинация двух предложений из этой темы.
Конфигурация веб-пакета основного приложения ( предложение @apieceofbart )

  resolve: {
    alias: {
      react: resolve('./node_modules/react')
    }
  }

Конфигурация веб-пакета зависимости ( предложение @tsevdos )

  externals:
    react: 'react'
  }

То же самое. Мне нужно сделать оба этих исправления, чтобы заставить его работать. Мое объяснение состоит в том, что вторая конфигурация указывает зависимости использовать внешнюю реакцию с именем «реагировать», а первая конфигурация указывает имя «реагировать» на папку «node_modules/react» в основном репозитории. Следовательно, оба они необходимы, чтобы заставить работать мост реакции.

Тем не менее, кажется, что для некоторых людей достаточно одного из них, что я не очень понимаю.

Второй пункт важен!
Если игнорировать, в процессе сборки реакция будет экспортирована вместе, потому что это внутренняя зависимость.

очень люблю @apieceofbart !!!! Я собирался пробить стол своим ногой через стену

Таким образом, обходного пути для микросервисов до сих пор нет. У меня есть корневое приложение с реакцией, которое динамически требует пакетов с другой реакцией. Мы не можем просто использовать внешнюю версию реакции, потому что есть много независимых команд со своими зависимостями. Если мы подтолкнем их к использованию одной и той же внешней версии, то очевидно, что большинство проектов потерпит крах, и будет невозможно обновить эту версию, поскольку каждый проект будет зависеть от этой версии.

Есть идеи?

Есть ли решение для использования реагирующих хуков вместе со ссылкой npm, которое не требует извлечения из CRA?

@tschellenbach
вы можете использовать craco для перезаписи конфигурации CRA без извлечения.
https://github.com/gsoft-inc/craco

Благодаря @tsevdos я решил свою проблему и сделал учебник по созданию пакета React: https://youtu.be/esyS87NfBOw

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

    "alias": {
        "react": "./node_modules/react",
        "react-dom": "./node_modules/react-dom"
    },

Возникают проблемы с попыткой использовать мои компоненты React (написанные в хуках) в электронном приложении в том же проекте с другим пакетом json. Структура файла выглядит следующим образом:

- javascript
  - src
     - ComponentIWantToUse.tsx
      - package.json
- electron
   - src
     - IwantToUseItHere.tsx
      - package.json

Оба package.json включают в себя response и react-dom в package.json, но это одни и те же версии, и я не вижу, чтобы он отображал две установки реакции, когда я делаю npm ls react . Есть идеи?

РЕДАКТИРОВАТЬ: решение @ewan-m сработало!

Так что я столкнулся со странным случаем, я думаю. Сторонняя библиотека, к сожалению, имеет смешанные функциональные компоненты и компоненты на основе классов. Мои компоненты в моей кодовой базе функциональны. Компонент на основе класса из библиотеки действует как макет, который отображает мой компонент как дочерний. Я считаю, что это то, что вызывает «Ошибка: неверный вызов ловушки». Как мне обойти это, чтобы использовать хуки, мне нужно преобразовать мой в компонент класса?

@GrandathePanda Смешивание классов и функциональных компонентов не должно иметь значения. Если класс вызывает функционал, который вызывает хук, в этом нет проблемы. Единственное, что вы не можете сделать, это вызвать хук прямо из класса.

Хорошо, @JeremyGrieshop , тогда мне еще предстоит кое-что изучить, если я визуализирую без использования стороннего компонента, он отображается нормально, поэтому между этой библиотекой и моим кодом возникает некоторый конфликт. Если бы мне пришлось предположить, что они используют другую версию реакции, возможно, в своем пакете.

Хорошо, @JeremyGrieshop , тогда мне еще предстоит кое-что изучить, если я визуализирую без использования стороннего компонента, он отображается нормально, поэтому между этой библиотекой и моим кодом возникает некоторый конфликт. Если бы мне пришлось предположить, что они используют другую версию реакции, возможно, в своем пакете.

Правильно, проверьте npm ls react react-dom в своем приложении, чтобы узнать, есть ли несколько версий. Возможно, у сторонней библиотеки есть зависимость от конкретной версии.

@JeremyGrieshop Итак, похоже, что мое приложение использует 16.12.0 для реагирования и dom, а стороннее (эластичный поисковый пользовательский интерфейс) использует 16.8.0 для реагирования и dom. Если я прав, проблема в том, что, поскольку моя сторонняя библиотека 16.8.0 отображает компонент, созданный с помощью 16.12.0, это вызовет проблему? Они также являются монорепозиторием lerna, что потенциально усложняет это еще больше после прочтения всех приведенных выше комментариев. Проблема возникает из-за хука useStyles, созданного в materialui, они предоставляют withStyles hoc для обратной совместимости, и я думаю, что тем временем я собираюсь пойти по этому пути. Все изменения в webpack и/или пакете json, упомянутые выше, действительно кажутся бинтом, который более подвержен поломке, чем просто использование классического hoc, в то время как хуки выясняют, как созреть перед лицом стольких различных придирок к реализации.

@GrandathePanda ИМХО, ваши варианты: (1) заставить третью сторону либо обновить свою зависимость реакции до 16.12, либо попросить их решить, подходит ли она в качестве одноранговой зависимости больше, чем зависимость; (2) Используйте 16.8 в своем приложении, чтобы они использовали одни и те же версии библиотеки; (3) Удалите свою копию реакции с помощью:

rimraf node_modules/search-ui/node_modules/react && rimraf node_modules/search-ui/node_modules/react-dom

Приведенную выше команду можно поместить в «предварительную сборку» и «предварительный запуск» в части «сценариев» вашего package.json (что я и делаю в настоящее время). Недостатком (3), я полагаю, является то, что они используют что-либо устаревшее между 16.8 и 16.12.

Всем привет,

У меня есть приложение (myApp), которое использует в качестве зависимости пользовательскую библиотеку (myDepPackage). Оба они используют webpack в качестве инструмента сборки, и, конечно же, у меня была такая же ошибка. Ни одно из вышеперечисленных решений не сработало для меня. Что он сделал, так это заставил веб-пакет НЕ включать реакцию в окончательный пакет пользовательской библиотеки (myDepPackage). Единственная строка конфигурации, которую мне пришлось добавить в конфигурацию веб-пакета (из myDepPackage), приведена ниже:

externals: {
  react: "react",
},

Вы можете узнать больше о опции «внешние» здесь: https://webpack.js.org/configuration/externals/#externals

@tsevdos я люблю тебя. Вы только что положили конец нескольким дням напряженных хлопот. Спасибо.

Всем привет,

Я пытаюсь использовать хук в компоненте, этот компонент должен быть экспортирован из gatsby-browser.js .

Каково текущее поведение?

Я получаю эту ошибку:

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

1. У вас могут быть несоответствующие версии React и рендерера (например, React DOM).
2. Возможно, вы нарушаете правила хуков.
3. У вас может быть более одной копии React в одном приложении.
   См. https://fb.me/react-invalid-hook-call советы о том, как отлаживать и устранять эту проблему.

Это пример кода:

import React from 'react';
import PropTypes from 'prop-types';
import { Provider } from 'react-redux';

import configureStore from './src/utils/configure-store';
import { useApiResources } from './src/hooks/use-api-resources';

const RootWrapper = ({ element }) => {
  const resources = useApiResources();
  const store = configureStore();
  return <Provider store={store}>{element}</Provider>;
};

RootWrapper.propTypes = {
  element: PropTypes.node.isRequired,
};

export default RootWrapper;

Каково ожидаемое поведение?

Хук должен работать без ошибок, или должны быть предоставлены полезные сообщения об ошибках.

Версии зависимостей react и react-dom: 16.12.0

@leejh3224 большое спасибо, чувак! после нескольких часов поиска я нашел этот ответ, он решил мою проблему.
Просто изменил конфигурацию HtmlWebpackPlugin с
inject: true до inject: 'head' , и минимизированные ошибки реакции исчезли.

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

Я переношу приложение jquery на React. У меня есть утилита для демонстрации компонентов React в jQuery под названием asJqueryPlugin . Вот файл:

import React from 'react'
import ReactDOM from 'react-dom'

/**
 * A way to render React components with props easily with jQuery
 *
 * ## Register the React Component
 *
 * In your React Component file, register the component with jQuery using `asJqueryPlugin`
 * ```
 * const Greeting = ({ person }) => <div>Hello {person}</div>
 * asJqueryPlugin('Greeting', Greeting, { person: "Bob" })
 * ```
 *
 * ## Rendering, Selecting and Updating Props with jQuery
 *
 * Select an element and render using the `react` function
 * ```
 * $('#greeting').react('Greeting', { person: 'Frank' })
 * ```
 */

window.reactRegistry = window.reactRegistry || {}

// This is how React components register themselves as available within jQuery
export default function asJqueryPlugin(componentName, Component) {
  window.reactRegistry[componentName] = { Component }
}

if (typeof window.$ !== 'undefined') {
  ;(function($) {
    // Add the plugin function jQuery
    $.fn.react = function renderReactIntoElements(componentName, props) {
      this.each(function render() {
        const entry = window.reactRegistry[componentName || $(this).data('react')]
        if (!entry) throw Error(`${componentName} component is not registered.`)
        ReactDOM.render(<entry.Component {...props} />, this)
      })
      return this
    }
  })(window.$)
}

Приложение имеет много точек входа в Webpack, и сейчас около 3-4 компонентов используют эту технику. Я полагаю, что когда компоненты объединены в разные пакеты точек входа, возникает проблема.

Итак, если у меня есть две точки входа в Webpack:

entry: {
      foo: './assets/js/foo',
      bar: './assets/js/bar'
}

Затем в каждом из этих файлов мы настраиваем открытый компонент (каждый из которых использует хуки):

// foo.js
import React from 'react'
import asJqueryPlugin from '../utils/asJqueryPlugin'
const Foo = () => {
  const ref = useRef()
  return <div ref={ref}>Foo</div>
}
asJqueryPlugin('Foo', Foo)

// bar.js
... same stuff but with Bar component

Теперь, если я включу обе записи на одну страницу и попытаюсь отобразить оба компонента через плагин jquery...

<script src="/bundles/foo.js" />
<script src="/bundles/bar.js" />
<script>
    $('#foo-container').react('Foo')
    $('#bar-container').react('Bar')
</script>

... Я получаю эту ошибку хуков.

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

Мне это помогло - https://github.com/facebook/react/issues/13991#issuecomment -554928373
Но мне также пришлось удалить react и react-dom из зависимостей и переместить их в одноранговые зависимости, а также удалить и переустановить модули узла.

Привет,
Я прочитал разговор и много сообщений в Интернете, и я все еще застрял с ошибкой нескольких экземпляров реакции.
Я нажимаю это репо для воспроизведения ошибки: https://github.com/jeromelegrand/dooliz-lib
Я надеюсь, что кто-то может помочь мне.
Спасибо.

Я столкнулся с этой проблемой и ничего не нашел с решениями выше.
Вкратце: я совершенно уверен, что у меня работает только одна реагирующая версия, и я получаю сообщение об ошибке, используя react-bootstrap, который, вероятно, не использует хуки неправильно, потому что ни у кого больше нет проблем.

Эта ошибка возникает у меня на бэкэнде node.js.

__Что я проверил в версиях реакции__

У меня есть настройка пряжи с рабочими пространствами, yarn list react или yarn list react-dom показывает только один экземпляр.

Я напечатал требуемый кеш, чтобы увидеть, что было импортировано:

for(var key in require.cache) {
    if(key.indexOf("react") !== -1 && key.indexOf("index") !== -1) {
        console.log(key);
    }
}

Я запускаю его непосредственно перед тем, как что-то разобрать из react-bootstrap, что вызывает у меня ошибку недопустимого хука, и он регистрирует:

C:\web\resourceful\daCore\node_modules\react-dom\index.js
C:\web\resourceful\daCore\node_modules\react\index.js
C:\web\resourceful\daCore\node_modules\react-router-dom\index.js
C:\web\resourceful\daCore\node_modules\react-router-dom\node_modules\react-router\index.js
C:\web\resourceful\daCore\node_modules\react-is\index.js
C:\web\resourceful\daCore\node_modules\mini-create-react-context\dist\cjs\index.js
C:\web\resourceful\daCore\node_modules\react-router\index.js
C:\web\resourceful\daCore\node_modules\@fortawesome\react-fontawesome\index.js
C:\web\resourceful\daCore\node_modules\@tinymce\tinymce-react\lib\cjs\main\ts\index.js

Что, похоже, подтверждает, что загружена только 1 версия реакции.

Наконец, я добавил это в node_modules/react-dom/index.js.

console.log("React DOM daCore");
global['React1'] = require('react');

И это для node_modules/react-router-dom/cjs/Form.js

require('react-dom');
global['React2'] = require('react');
console.log('#TEST '+(global['React1'] === global['React2']? 'SAME' : 'NOT SAME'));

Что печатает SAME

Любая идея, что еще это может быть?
Я также опубликую это в репозитории react-bootstrap.

Поэтому я почти уверен, что наличие двух экземпляров React здесь не проблема. Я думаю, проблема в том, что есть два реагирующих _roots_. Вы вызываете ReactDOM.render() несколько раз в разных частях страницы? Если это так, я думаю, что это может вызвать проблему. Я думаю, что хуки «принадлежат» к определенному «корню» и ломаются, когда их несколько, и два пакета имеют общий код. Я тут предполагаю...

... Я думаю, проблема в том, что есть два реагирующих _root_. Вы вызываете ReactDOM.render() несколько раз в разных частях страницы?

Спасибо @timkindberg , это помогло мне наконец решить эту проблему. Я понял, что использую react-tree-walker для начального рендеринга и получения необходимых данных перед окончательным рендерингом с помощью ReactDOMServer.renderToString

Быстрое удаление использования этого пакета устранило ошибку, и теперь у меня то же самое работает с react-ssr-prepass , что на самом деле теперь рекомендуется на странице readme react-tree-walker

Так что это действительно были два вызова ReactDOM.render ! На данный момент эта настройка с react-ssr-prepass работает для меня, и когда Suspense приземляется в react-dom/server, я могу переключиться на это

Я использую react-compare-image https://github.com/junkboy0315/react-compare-image в своем проекте Gutenberg, но у меня возникла эта странная проблема, хотя все работает, когда я удаляю компонент ReactCompareImage из функции сохранения. Функция редактирования работает отлично, но сохранение не работает.

Я просмотрел https://reactjs.org/warnings/invalid-hook-call-warning.html и не думаю, что у меня есть какие-либо из этих проблем.

Вот полный файл функции сохранения:

``импортировать инспектора из "./inspector";
импортировать {фрагмент} из "реагировать";
импортировать ReactCompareImage из «реагировать-сравнить-изображение»;

/**

• зависимости WordPress
  */
  константа {__} = wp.i18n;

const save = ({имя_класса, атрибуты}) => {

const {
    paddingTop,
    paddingRight,
    paddingBottom,
    paddingLeft,

    marginTop,
    marginRight,
    marginBottom,
    marginLeft,

    border,
    borderColor,
    borderType,
    background,

    backgroundImage,
    gradient,

    dividerColor,
    buttonColor,

    direction,

    beforeImage,
    beforeLabel,
    afterImage,
    afterLabel,

} = attributes;

const style = {
    "padding": `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
    "margin": `${marginTop}px ${marginRight}px ${marginBottom}px ${marginLeft}px`,
    "border": `${border}px ${borderType} ${borderColor}`,
    "background": background
};

return(
    <Fragment>
        <ReactCompareImage
            leftImage={beforeImage.url}
            leftImageLabel={beforeLabel}
            rightImage={afterImage.url}
            rightImageLabel={afterLabel}
            vertical={'vertical' === direction}
            sliderLineColor={dividerColor}
        />
    </Fragment>
);

};

экспортировать сохранение по умолчанию;
```

Я также сталкиваюсь с этой проблемой. У меня есть резюме, опубликованное на SO: https://stackoverflow.com/questions/60331304/next-js-with-typescript-invalid-hook-call-hooks-can-only-be-call-inside-of-t

У меня также есть минимальный воспроизводимый пример: https://github.com/coler-j/shopify_playground

Мое основное приложение — это приложение create-react (не извлеченное), которое импортировало общую библиотеку, которая также использовала React. Я смог решить это:

Использование Rollup для упаковки библиотеки вместо веб-пакета
По какой-то причине я еще не разобрался, использование внешних компонентов не удаляло React из комплекта библиотек.

свертка-config.js

export default [
  {
    input: 'src/index.js',
    output: {
      file: pkg.main,
      format: 'cjs',
      sourcemap: true,
    },
    plugins: [external(), babel(), resolve(), commonjs(), svgr()],
  },
  {
    input: 'src/index.js',
    output: {
      file: pkg.module,
      format: 'es',
      sourcemap: true,
    },
    plugins: [
      alias({
        entries: [{ find: '<strong i="12">@components</strong>', replacement: 'src/components' }],
      }),
      external(),
      babel(),
      svgr(),
    ],
  },
]

Установка craco и его использование для изменения веб-пакета основного приложения
craco.config.js

const path = require('path')

module.exports = {
  webpack: {
    alias: {
      react: path.resolve(__dirname, './node_modules/react'),
    },
  },
}

Спасибо @arminyahya за то, что указал мне на craco.

Я пытаюсь использовать хуки при загрузке реакции с cdn. Этот пример (это вся html-страница) дает ошибку $# Hooks can only be called inside of the body of a function component при вызове Example() . Я удалил все, даже ReactDOM, поэтому трудно представить, что у меня может быть несколько копий React. Это просто невозможно?

<!DOCTYPE html>
<html>

<head>
  <script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

</body>
  <script type="text/babel">
    function Example() {
      let [count, setCount] = React.useState(0);
      return ( <h1>Hello</h1> );
    };

  Example();
  </script>
</body>

</html>

@samkamin Это потому, что у тебя НЕТ реагирующих корней. Вам нужно отрендерить ваше приложение. Тем не менее, это все еще хорошее подтверждение того, что хуки полагаются (и связаны) с корнем реакции.

<html>
<head>
  <script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
</body>
  <div id="root"></div>
  <script type="text/babel">
    function Example() {
      let [count, setCount] = React.useState(0);
      return ( <h1>Hello</h1> );
    };

    ReactDOM.render(<Example />, document.getElementById('root'))
  </script>
</body>
</html>

Спасибо! На самом деле это было не отсутствие корня реакции - я просто удалил его, чтобы максимально упростить ошибку, - но что-то столь же глупое: вместо <Example /> я просто написал Example() . Совсем не то же самое. Спасибо еще раз.

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

webpack.config.js

module.exports = {
  entry: ENTRY,
  output: {
    library: LIBRARY_NAME,
    path: path.resolve(__dirname, OUTPUT_DIR),
    filename: OUTPUT_FILENAME,
    libraryTarget: 'commonjs2',
  },
  module: {
    rules: [
      {
        test: /\.(js|tsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: 'ts-loader',
      },
    ],
  },
  resolve: {
    alias: {
      '<strong i="7">@src</strong>': path.resolve(__dirname, './src'),
      '<strong i="8">@components</strong>': path.resolve(__dirname, './src/components'),
      '<strong i="9">@core</strong>': path.resolve(__dirname, './src/core'),
      react: path.resolve(__dirname, './node_modules/react'),
      'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
    },
    extensions: ['.js', '.json', '.tsx', '.ts'],
  },
  externals: {
    react: 'react',
  },
  target: 'node',
  plugins: [
    new HtmlWebPackPlugin({
      template: './tests/index.html',
      filename: 'index.html',
    }),
  ]}

Какие-либо предложения? Я проверил все предложения старых обсуждений.
Спасибо! :ухмылка:

Я объявил Settings.js следующим образом:

import React, {useState} from 'react';

import {
    View,
    Text,
    Switch
} from 'react-native';

export function Settings(props) {
    const [rememberPin, setRememberPin] = useState(false);
    let {changeView, header} = props;


    const toggleRememberPin = (value) => {
        setRememberPin(value);
    };

    return (
            <View>
                    <Text>Remember PIN:</Text>
                    <Switch
                        onValueChange={toggleRememberPin}
                        value={rememberPin}
                        ios_backgroundColor="#aeaeae"
                        />
            </View>
    );
}

export default {Settings};

Я импортирую и использую его в App.js следующим образом:

import React, {Component} from 'react';
import {
    SafeAreaView,
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Dimensions,
    ScrollView,
    Switch
} from 'react-native';

import Colors from './src/assets/Colors';
import {Settings} from './src/components/Settings';
...

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {viewsStack: this.viewsStack};
    }

    viewsStack = {
        SplashScreen: false,
        BindingInstructions: false,
        PinPad: false,
        Qr: false,
        Dashboard: false,
        Authorizations: false,
        Settings: true,
        Browsers: false,
        TransmitSDK: false,
        OTP: false,
    };

    changeView = (newView) => {
        let {viewsStack} = this.state;
        for (let key of Object.keys(viewsStack)) {
            viewsStack[key] = false;
        }
        viewsStack[newView] = true;
        this.setState(viewsStack);
    };

    render() {
        let {viewsStack} = this.state;
        return (
            <SafeAreaView style={styles.safeAreaView}>
                {viewsStack.SplashScreen && (splashScreen())}
                {viewsStack.BindingInstructions && (bindingInstructions({changeView: this.changeView}))}
                {viewsStack.PinPad && (pinPad({message: 'Inserisci un nuovo PIN', changeView: this.changeView}))}
                {viewsStack.Qr && (qr({header: 'QR Binding', message: 'Scansiona il QR dalla tua dashboard\noppure\ninserisci il codice manualmente.', changeView: this.changeView}))}
                {viewsStack.Dashboard && (dashboard({header: 'Profilo Utente', changeView: this.changeView}))}
                {viewsStack.Authorizations && (authorizations({header: 'Autorizzazioni', authorizations: [1, 2, 3, 4, 5, 6], changeView: this.changeView}))}
                {viewsStack.Settings && (Settings({header: 'Impostazioni', changeView: this.changeView}))}
            </SafeAreaView>
        );
    }
};
...

Но я получаю:

Я использую:

"react": "16.9.0",
"react-native": "0.61.5"

Что случилось?

Вы вызываете свой компонент Settings как функцию, а не как функциональный компонент.

<Settings header='Impostazioni' changeView={this.changeView} />

Хуки не допускаются внутри простых функций, только в функциональных компонентах, и то, как вы их вызываете, заставляет React думать, что ваш компонент на самом деле является обычной функцией.

Возможно, это избавит кого-то от головной боли, если вы используете react-router-dom, если вы передадите свой компонент в рендеринг вот так (неправильным образом), это даст Invalid Hook Call Warning
<Route path="/:cuid/:title" render={PostArticle} />

Мне потребовалось полчаса, чтобы понять, где я ошибся

Кому-то это может помочь — если вы столкнулись с этой ошибкой после использования react-router-dom, проверьте, как вы определили свои маршруты. например, это должно быть <Route path={'/upgrade/:plan'} exact children={<Upgrade />} /> , пока я делал <Route path={'/upgrade/:plan'} exact children={Upgrade} />

Это особенно неудобно, если вы используете чернила или пастель для создания CLI (см. https://github.com/vadimdemedes/pastel/issues/2). Я не могу сделать это peerDep, потому что я не могу попросить каждого пользователя установить React, и я также не могу заставить их использовать определенную версию/диапазон React.

Моя команда использует Yarn и получает ошибку Invalid hook call только в тестах, а не в приложении. Проблема заключалась в том, что react-test-renderer разрешалась в версию ниже, чем у react и react-dom , поэтому мы добавили resolutions в package.json :

"devDependencies": {
    ...
    "react": "16.12.0",
    "react-dom": "16.12.0",
    ...
},
"resolutions": {
    "react-test-renderer": "16.12.0"
}

Для людей, использующих Gatsby в подкаталоге, это возможное решение.

gatsby-node.js :

const path = require('path')
const fromRoot = name => path.resolve(__dirname + '/../node_modules/' + name)

exports.onCreateWebpackConfig = ({ actions }) => actions.setWebpackConfig({
  resolve: {
    alias: {
      'react': fromRoot('react'),
      'react-dom': fromRoot('react-dom'),
    },
  },
})

У меня такая же проблема при выполнении команды npm link ，есть проблема

Затем я использовал официальное решение, предоставленное реакцией, чтобы решить эту проблему.

Эта проблема также может возникнуть при использовании ссылки npm или ее эквивалента. В этом случае ваш упаковщик может «увидеть» два React — один в папке приложения и один в папке вашей библиотеки. Предполагая, что myapp и mylib являются родственными папками, одно из возможных исправлений — запустить npm link ../myapp/node_modules/react из mylib. Это должно заставить библиотеку использовать копию приложения React.

Если А должен представить Б (А и Б — братья и сестры)

• шаг 1 (в В)
  
  
  
  • npm link ./../A/node_modules/react
  
  
  • npm link
  
  
• шаг 2 (в А)
  npm link B

меня устраивает

Даже с этими ответами я не уверен, почему я получаю сообщение об ошибке. У меня есть моя библиотека зависимостей, связанная с моим основным приложением, и после того, как я получил ошибку, я следовал документам реакции и связал версию моей библиотеки зависимостей с реакцией моего приложения (запустив npm link <>/webapp/node_modules/react . (даже сделал это с реакцией) dom). Когда я вошел в систему, чтобы проверить, совпадают ли React1 и React2, он записал true , поэтому я не использовал дублирующиеся версии React, я использовал те же версии React и использовал функциональные компоненты. Таким образом, несмотря на то, что в протоколе испытаний указывалось, что у меня нет дублирующей версии React, я все равно получал ошибку ловушки.

Но попытка этого решения, как упоминалось выше, исправила эту конкретную ошибку:

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

Так что я в растерянности.

Так что я в растерянности.

@orpheus Вы отображаете более одного корня реакции на одну и ту же страницу? иначе у вас есть более одного вызова ReactDOM.render на одной странице?

Вы выводите более одного корня реакции на одну и ту же страницу? иначе у вас есть более одного вызова ReactDOM.render на одной странице?

@тимкиндберг

Я не. У меня есть один ReactDOM.render в корне моего app , а модуль lib , который я связываю, является библиотекой компонентов и не использует ReactDOM.render вообще.

редактировать: я делаю что-то вроде:

import React from 'react'
import ReactDOM from 'react-dom'
import Root from './App/Root'

ReactDOM.render(
  <Root />,
  document.getElementById('root')
)

где <Root /> отображает что-то вроде

const Root = () => {
  return <Provider store={store}>
        <PermissionsProvider>
              <Suspense fallback={null}>
                <Router history={history}>
                  <Routes store={store} />
                </Router>
              </Suspense>
        </PermissionsProvider>
  </Provider>
}

PermissionsProvider — это компонент React, который я импортирую из моего связанного модуля lib , который использует хук, который приводит к сбою приложения. Он создает состояние и контекст и отображает его дочерние элементы.

Привет, я использую электрон с реактивными крючками. если я напишу свой собственный хук, он сработает. Но возникает ошибка, когда я использую хуки из другого пакета в node_module, например react-use , swr .

Мне нужно скопировать пакет в мой локальный файл.

Кто-нибудь встречается с этой проблемой?

Пример проекта здесь:
https://github.com/Zaynex/electron-react-ts-kit/tree/hooks-error

основной код:
https://github.com/Zaynex/electron-react-ts-kit/blob/hooks-error/src/renderer/app.tsx

У меня также все еще есть эта проблема даже после удаления повторяющихся копий реакции и реакции-дома. Я создал очень простой тестовый проект для воспроизведения.

$ tree -I node_modules
.
|-- test-app
|   |-- dist
|   |   |-- index.html
|   |   `-- main.js
|   |-- package-lock.json
|   |-- package.json
|   |-- src
|   |   |-- index.html
|   |   `-- index.js
|   `-- webpack.config.js
`-- test-lib
    |-- dist
    |   `-- main.js
    |-- package-lock.json
    |-- package.json
    |-- src
    |   `-- index.js
    `-- webpack.config.js

В настоящее время я использую метод псевдонима webpack, но я также пробовал метод npm link , и ни один из них не работает.

Я тоже столкнулся с этой проблемой. Я использую ExpressJS + Pug для визуализации представлений, затем я написал средство визуализации (похожее на ReactRails), которое позволяет отображать компоненты на стороне сервера и клиента.

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

Чтобы это исправить, мне пришлось добавить под ключ resolve :

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

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

Редактировать: я говорил слишком рано. Теперь он отлично работает с рендерингом React, но не с гидратом.

Привет, я использую электрон с реактивными крючками. если я напишу свой собственный хук, он сработает. Но возникает ошибка, когда я использую хуки из другого пакета в node_module, например react-use , swr .

Мне нужно скопировать пакет в мой локальный файл.

Кто-нибудь встречается с этой проблемой?

Пример проекта здесь:
https://github.com/Zaynex/electron-react-ts-kit/tree/hooks-error

основной код:
https://github.com/Zaynex/electron-react-ts-kit/blob/hooks-error/src/renderer/app.tsx

Привет. Я была такая же проблема. Я использую электронный веб-пакет, который помечает все модули как внешние для веб-пакета. За несколькими жестко закодированными исключениями, такими как react и react-dom.
Для меня это означало, что реакция, загруженная из моего кода, отличалась от реакции, загруженной из такого модуля.
Добавление этих модулей в белый список , кажется, помогает (не уверен, что это еще ничего не сломало :)

@huhle спасибо, это работает! Может быть, нам стоит погрузиться в электронный веб-пакет.

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

Кажется, все сводится к конфигурации проекта package.json , который я импортирую. Мне нужно было включить эти разделы:

 "peerDependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "workspaces": {
    "nohoist": [
      "react", "react-dom"
    ]
  }

После этого мне пришлось перестроить проекты, и я был готов к работе. Кажется, что перечисление их в качестве одноранговых зависимостей позволяет требовать их установки вашим потребляющим проектом. И поскольку они не перечислены в зависимостях, они не должны быть доступны для пакета, который вы пытаетесь импортировать, но по какой-то причине, если вы не скажете ему не поднимать, они остаются доступными, и новый экземпляр реакции пробивается и вызывает ошибку.

Удачи!

Я пытаюсь использовать реактивную пружину, чтобы получить простой эффект постепенного появления. Кажется, ничего не работает.
`импортировать React, {useState, useEffect} из 'реакции';
импортировать {анимированные, useTransition} из 'React-Spring';

const TextContent = (реквизит) => {

const [items] = useState([
    { id: '0', title: 'Text1' },
    { id: '1', title: 'Text2' },
    { id: '2', title: 'Text1' }
])

const [index, setIndex] = useState(0);

const transitions = useTransition(items[index], index => index.id,
    {
        from: { opacity: 0 },
        enter: { opacity: 1 },
        leave: { opacity: 0 },
        config: { tension: 220, friction: 120 }
    }
)

useEffect(() => {
    const interval = setInterval(() => {
        setIndex((state) => (state + 1) % items.length);
    }, 4000)
    return () => clearInterval(interval);
}, []);

return (
    <div>
        {
            transitions.map(({ item, props, key }) => (
                <animated.div
                    key={key}
                    style={{ ...props, position: 'absolute' }}
                >
                    <p>{item.title}</p>
                </animated.div>
            ))
        }
    </div>
)

}

экспортировать TextContent по умолчанию;`

Я попытался проверить, есть ли у меня несколько экземпляров React. Npm ls-ing говорит мне, что у меня только одна версия react и react-dom, обе версии 16.13.1.

Привет, я использую электрон с реактивными крючками. если я напишу свой собственный хук, он сработает. Но возникает ошибка, когда я использую хуки из другого пакета в node_module, например react-use , swr .
Мне нужно скопировать пакет в мой локальный файл.
Кто-нибудь встречается с этой проблемой?
Пример проекта здесь:
https://github.com/Zaynex/electron-react-ts-kit/tree/hooks-error
основной код:
https://github.com/Zaynex/electron-react-ts-kit/blob/hooks-error/src/renderer/app.tsx

Привет. Я была такая же проблема. Я использую электронный веб-пакет, который помечает все модули как внешние для веб-пакета. За несколькими жестко закодированными исключениями, такими как react и react-dom.
Для меня это означало, что реакция, загруженная из моего кода, отличалась от реакции, загруженной из такого модуля.
Добавление этих модулей в белый список , кажется, помогает (не уверен, что это еще ничего не сломало :)

Великолепно! Спасибо

Я пытаюсь использовать реактивную пружину, чтобы получить простой эффект постепенного появления. Кажется, ничего не работает.
`импортировать React, {useState, useEffect} из 'реакции';
импортировать {анимированные, useTransition} из 'React-Spring';

const TextContent = (реквизит) => {

const [items] = useState([
    { id: '0', title: 'Text1' },
    { id: '1', title: 'Text2' },
    { id: '2', title: 'Text1' }
])

const [index, setIndex] = useState(0);

const transitions = useTransition(items[index], index => index.id,
    {
        from: { opacity: 0 },
        enter: { opacity: 1 },
        leave: { opacity: 0 },
        config: { tension: 220, friction: 120 }
    }
)

useEffect(() => {
    const interval = setInterval(() => {
        setIndex((state) => (state + 1) % items.length);
    }, 4000)
    return () => clearInterval(interval);
}, []);

return (
    <div>
        {
            transitions.map(({ item, props, key }) => (
                <animated.div
                    key={key}
                    style={{ ...props, position: 'absolute' }}
                >
                    <p>{item.title}</p>
                </animated.div>
            ))
        }
    </div>
)

}

экспортировать TextContent по умолчанию;`

Я попытался проверить, есть ли у меня несколько экземпляров React. Npm ls-ing говорит мне, что у меня только одна версия react и react-dom, обе версии 16.13.1.

То же самое. react и react-dom для меня находятся на 16.13.1, и попытка использовать react-spring приводит к той же ошибке.

Из другого потока на styled-components я узнал, что если вы используете собственный локальный пакет через URI file: в package.json , вам нужно rm -rf node_modules/local-package-name/node_modules перед запуском вашего приложения, потому что, видимо, локальные пакеты копируются без проверки node_modules на наличие избыточных зависимостей.

Из другого потока на styled-components я узнал, что если вы используете собственный локальный пакет через URI file: в package.json , вам нужно rm -rf node_modules/local-package-name/node_modules перед запуском вашего приложения, потому что, видимо, локальные пакеты копируются без проверки node_modules на наличие избыточных зависимостей.

Да, это одна и та же проблема примерно для дюжины вариантов использования только в этом потоке. Я добавил цель «prestart» и «prebuild», чтобы выполнить rm -rf (используя rimraf). Другой пользователь в этом потоке использовал npm-link-shared в своем предварительном запуске, чтобы заставить модули совместно использовать один и тот же экземпляр реакции. Многие из нас, пользователей монорепозиториев, сталкиваются с этим.

Привет, я использую электрон с реактивными крючками. если я напишу свой собственный хук, он сработает. Но возникает ошибка, когда я использую хуки из другого пакета в node_module, например react-use , swr .
Мне нужно скопировать пакет в мой локальный файл.
Кто-нибудь встречается с этой проблемой?
Пример проекта здесь:
https://github.com/Zaynex/electron-react-ts-kit/tree/hooks-error
основной код:
https://github.com/Zaynex/electron-react-ts-kit/blob/hooks-error/src/renderer/app.tsx

Привет. Я была такая же проблема. Я использую электронный веб-пакет, который помечает все модули как внешние для веб-пакета. За несколькими жестко закодированными исключениями, такими как react и react-dom.
Для меня это означало, что реакция, загруженная из моего кода, отличалась от реакции, загруженной из такого модуля.
Добавление этих модулей в белый список , кажется, помогает (не уверен, что это еще ничего не сломало :)

Это также относится к людям, у которых есть проблемы с redux или redux toolkit и electronic-webpack. У меня есть следующая рабочая конфигурация:

// package.json
...
"electronWebpack": {
  "whiteListedModules": ["react-redux"]
}

см. https://github.com/electron-userland/electron-webpack/issues/349

Моя проблема заключалась в том, что я написал

import React from 'React'

Вместо:

import React from 'react'

Иногда это глупости.

Я решил это, добавив следующее в конфигурацию моего веб-пакета:

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

Сначала я подумал, что это проблема с npm link, сделал все, что было предложено, и даже перешел на пряжу. В конце концов выяснилось, что происходит что-то еще, когда публикация в npm давала ту же ошибку при импорте в другой проект.

Кто-нибудь здесь решил это недавно с монорепозиторием lerna? Я пробовал несколько предложений без везения.

Ошибка возникает после добавления кода, закомментированного // ниже. Добавление CssBaseline и информации о фрагменте реакции вызывает ошибку. Все работает нормально, когда это закомментировано. Исходный код — это просто базовый код npx create-react-app. Совершенно новый для этого, и несколько исправлений, которые я попробовал выше, не дали эффекта.

импортировать React из «реагировать»;
импортировать логотип из './logo.svg';
импортировать CssBaseline из '@material-ui/core/CssBaseline';

функция экспорта по умолчанию App() {
вернуть (

        //<React.Fragment>

        //<CssBaseline />

        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <p>
                    Edit <code>src/App.js</code> and save to reload.
                    </p>
                <a
                    className="App-link"
                    href="https://reactjs.org"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Learn React
                    </a>
            </header>
        </div>

    //</React.Fragment>

);
}

Для локального тестирования:
В библиотеке node_modules удалите папку react и react-dom
В основном пакете снова запустите «yarn install» или «npm install».

Это предотвращает загрузку второй копии реакции в основной пакет. Очевидно, что это не постоянное исправление, но работает для локального тестирования.

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

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

Кажется, что реакция внутренне управляет состоянием в переменной ReactCurrentDispatcher.current , и это в конечном итоге устанавливается в одном экземпляре реакции, но используется в другом экземпляре реакции - когда он пуст, он выдает Invalid hook call ... сообщение.

Мы уже использовали Craco для переопределения конфигурации веб-пакета Create React App во время сборки:

  webpack: {
    alias: {
      react: path.resolve(__dirname, './node_modules/react'),
    },
  },

Однако это переопределение веб-пакета используется только во время сборки — при выполнении тестов код не создается, а создается из исходного кода — поэтому нашим решением было использовать CracoAlias ​​в нашем craco.config.js , чтобы указать путь реакции во время тестов:

  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'options',
        baseUrl: './',
        aliases: {
          // We need to alias react to the one installed in the desktop/node_modules
          // in order to solve the error "hooks can only be called inside the body of a function component"
          // which is encountered during desktop jest unit tests,
          // described at https://github.com/facebook/react/issues/13991
          // This is caused by two different instances of react being loaded:
          // * the first at packages/desktop/node_modules (for HostSignUpDownloadComponent.spec.js)
          // * the second at packages/components/node_modules (for packages/components/Modal)
          react: './node_modules/react',
        },
      },
    },
  ],

Я использовал @craco/craco в качестве решения без извлечения, следуя примеру @apieceofbart . Шаги для меня были следующими, используя npm link для тестирования локального модуля:

1. Установите craco в мое демонстрационное приложение, запустив npm i @craco/craco --save
2. Создайте файл конфигурации craco.config.js в корне, где package.json находится в демонстрационном приложении.
3. Измените сценарии start , build и test , заменив react-scripts на craco в моем демонстрационном приложении.

// craco.config.js
const path = require('path');

module.exports = {
    webpack: {
        alias: {
            react: path.resolve(__dirname, './node_modules/react')
        }
    }
}

// package.json
{
....
"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
...
}

edit: я даже не заметил, что у @jasondarwin была такая же идея.

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

Мы используем монорепозиторий, и два пакета импортировали разные экземпляры из реакции, но они разрешались в одно и то же место в модулях корневого узла. Оказывается, у нас были эти два экземпляра, потому что одно из приложений использовало собственный веб-пакет для создания пакета. Это правильно поднималось в модуль корневого узла, но при импорте этим пакетом он получал свой собственный экземпляр. Решение заключалось в том, чтобы включить реакцию и реакцию DOM во внешние настройки конфигурации веб-пакета, чтобы веб-пакет не создавал новый экземпляр реакции для пакета.

externals: { react: 'react', reactDOM: 'react-dom', },

Надеюсь, это поможет кому-то!

Для меня это использовалось react-hot-loader версии 4.0.0, обновление до react-hot-loader 4.8, похоже, помогло.

Я получаю сообщение Invalid hook call ТОЛЬКО при запуске своих тестов на пользовательском хуке, который я создаю для работы с модальными окнами.

Чтобы продемонстрировать поведение, я создал следующий пример:
(https://github.com/BradCandell/invalid-hook-example)

• Только одна версия react и react-dom

Я упускаю что-то ужасно очевидное? Когда я нарушал правило в прошлом, npm start терпел неудачу. Но это только провал в моих тестах.

Я ценю помощь!
-Брэд

Я решил это, добавив следующее в конфигурацию моего веб-пакета:

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

Сначала я подумал, что это проблема с npm link, сделал все, что было предложено, и даже перешел на пряжу. В конце концов выяснилось, что происходит что-то еще, когда публикация в npm давала ту же ошибку при импорте в другой проект.

Это исправило это для меня. Я импортировал react-toastify и получал неверный вызов ловушки. Я просмотрел каждый пункт в консоли с ошибкой:

1. У вас могут быть несоответствующие версии React и React DOM.
   
   
   
   1. Возможно, вы нарушаете правила хуков.
   
   
   2. У вас может быть более одной копии React в одном приложении.
   
   

В итоге вышел 3-й номер. Я последовал этому:
https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate -реагировать

Ни одно из приведенных выше решений не работало для меня, пока я не понял, что связываю другую копию реакции с библиотекой, которую я _импортировал_.
Я транспилировал и упаковал исходный код своей библиотеки, поэтому проверка различных версий React, перечисленных в документации, возвращала true вместо false .
Пометка react как внешняя зависимость и исключение ее из пакета моей библиотеки сделали свое дело.

Мой случай был не монорепозиторием, а чем-то похожим. Мы разрабатываем новую структуру пользовательского интерфейса, и вместо использования npm link или lerna мы просто используем псевдонимы веб-пакетов, чтобы запрашивать файлы в родственной папке. Он отлично работает, но вы столкнетесь с этой проблемой. К счастью, решение от @apieceofbart устранило проблему.

Строка 130:21: React Hook «useStyles» вызывается в функции «pharmacyDashboard», которая не является ни компонентом функции React, ни пользовательской функцией React Hook.
Строка 133:45: React Hook «React.useState» вызывается в функции «pharmacyDashboard», которая не является ни компонентом функции React, ни пользовательской функцией React Hook.

это ошибка ..... может кто-нибудь, пожалуйста, помогите мне в решении этого

@vyshnaviryali лучше назовите свою функцию usePharmacyDashboard

./src/components/HomeFiles/AppFooter.js
Строка 1:1: не найдено определение правила «material-ui/no-hardcoded-labels».
может кто-нибудь, пожалуйста, помогите мне в решении этого

Для всех, кто работает с этой проблемой с npm link , потому что вам нужно добавить функции к вашим компонентам, но не хотите npm publish перед тестированием, я удивлен, что никто не предложил использовать yalc (https://www.npmjs.com/package/yalc)

Для всех, кто работает с этой проблемой с npm link , потому что вам нужно добавить функции к вашим компонентам, но не хотите npm publish перед тестированием, я удивлен, что никто не предложил использовать yalc (https://www.npmjs.com/package/yalc)

Я действительно сделал в прошлом году: https://github.com/facebook/react/issues/13991#issuecomment -535150839

Пользуемся уже почти год без нареканий.

Еще один здесь, использующий lerna; чтобы исправить это, я переместил зависимости react и react-dom в свой корень package.json .

У меня была такая же проблема, и я решил ее, добавив:

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

to свойство resolve в конфигурации веб-пакета моего основного приложения.

Очевидно, это была моя ошибка, когда я использовал две копии React, но я согласен, что было бы здорово, если бы сообщение об ошибке было лучше. Я думаю, что это может быть похоже на: # 2402

Для тех, кто использует описанный выше метод, но по-прежнему получает ошибки при запуске jest, добавьте их в moduleNameMapper в конфигурации jest (опустите react-dom, если это не нужно):

moduleNameMapper: {

...

  "^react$": "<rootDir>/node_modules/react",
  "^react-dom$": "<rootDir>/node_modules/react-dom",

...

}

Я в растерянности. Я получаю это, но мое приложение не использует никаких хуков, и нет дубликатов реакции или реакции. Я использую next.js. Может это как-то связано?

npm ls react
npm ls react-dom

@maapteh это было для меня? Я выполнил эти команды и не нашел дубликатов. Обе библиотеки имеют версию 16.13.1.

@dancancro Я также использую Next.js и не могу это исправить.

npm ls react и npm ls react-dom возвращают только одну запись. Но я не уверен, что это правильно. Я сталкиваюсь с этой ошибкой при ссылке на локальный пакет для разработки. npm ls возвращает только одну запись, даже если я не связываю реакцию в зависимости с основным репо. Но даже когда я правильно реагирую на ссылку, я все равно получаю сообщение об ошибке.

@justincy У меня нет ссылок на пакеты в моем проекте. Бьюсь об заклад, это связано с Next.js. Проблема исчезнет, ​​если я помещу основной компонент внутрь typeof document !== 'undefined' , что фактически подорвет цель Next.js.

Мне удалось решить мою проблему, удалив реакцию и реакцию-дом из node_modules в зависимости. Это не идеально, но, по крайней мере, я могу продолжать работать.

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

Проблема исчезнет, ​​если я удалю пять из семи компонентов в основном компоненте. Я не вижу ничего особенного в этих компонентах. Обертывание этих компонентов в typeof document !== 'undefined' также работает.

Привет, команда, я пытаюсь обновить версию React с 16.2.0 до 16.13.1, также сделал то же самое для react-dom.
Теперь у меня есть компонент-оболочка, который вызывается в "/test"

class TestWrapper extends React.Component { render() { return ( <React.Fragment> <TestComponent /> </React.Fragment> ) } }

в тестовой оболочке я импортировал функциональный компонент с хуком
function TestComponent(props) { useEffect(() => { console.log("TEST COMPONENT"); }); return ( <div> Hello world! </div> ) }

Но когда страница рендерится, хук UseEffect не работает, и возникает ошибка, т.е. предупреждение о недопустимом вызове хука.
PS. :

1. Я проверил, что у меня есть только одна копия реакции и установлена ​​реакция-дом
2. Версия React и react-dom — 16.13.1.

это то, что у меня есть
Я просто ...
@ @

Я использую nextJS, поэтому мне не нужен импорт React. А я пробовал - не помогает.

Все остальные страницы и функции работают отлично

@Brotipok какая версия next.js? (Вижу похожие проблемы, но только при переходе на 9.5 с 9.4.Х)

Привет!

У меня та же ошибка, только один пакет для реакции и реакции dom, когда я делаю npm ls.

Версия реакции: 16.13.1
Версия React-дома: 16.13.1

Я использую typescript и инициализировал проект с помощью create-react-app my-app --template typescript.

Функциональный компонент работает только в том случае, если я не использую в нем хуки.

Пакет.json

{
"имя": "блабламовие",
"версия": "0.1.0",
"частное": правда,
"зависимости": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/реакция": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"@types/jest": "^24.9.1",
"@типы/узел": "^12.12.53",
"@types/реагировать": "^16.9.43",
"@types/react-dom": "^16.9.8",
"@types/react-router-dom": "^5.1.5",
"значки реакции": "^3.10.0",
"реагировать-скрипты": "3.4.1",
"машинопись": "^3.7.5",
"webpack-bundle-analyzer": "^3.8.0"
},
"скрипты": {
"start": "запуск реагирующих скриптов",
"build": "сборка реагирующих скриптов",
"test": "тестирование реагирующих скриптов",
"eject": "извлечь скрипты реакции",
"analyze": "source-map-explorer 'build/static/js/*.js'"
},
"eslintConfig": {
«расширяет»: «реагировать-приложение»
},
"список браузеров": {
"производство": [
«>0,2%»,
"не умер",
"не все op_mini"
],
"разработка": [
"последняя 1 версия хрома",
"последняя 1 версия Firefox",
"последняя 1 версия сафари"
]
}
}
Это важный проект, и он немного сводит меня с ума.
Если кто-то может помочь Это было бы здорово.
Спасибо.

@Brotipok какая версия next.js? (Вижу похожие проблемы, но только при переходе на 9.5 с 9.4.Х)

Вот зависимости
"зависимости": {
"следующий": "9.4.4",
"следующие изображения": "^1.4.0",
"узел-дерзость": "^4.14.1",
"реагировать": "16.13.1",
"реагировать-документ-мета": "^3.0.0-бета.2",
"реакция-дом": "16.13.1",
"реагировать-горизонтальная-временная шкала": "^ 1.5.3",
"реагировать-мета-теги": "^0.7.4",
"реагировать на клик снаружи": "^6.9.0"
},
"devDependencies": {
"@типы/узел": "^14.0.23",
"@types/реагировать": "^16.9.43",
"машинопись": "^ 3.9.7"
}

Я сталкиваюсь с той же проблемой при импорте компонентов material-ui/core/Dialog , я настроил свой package.json на использование реакции 16.8.0 специально для react и react-dom импорт.

Я запускал npm ls react и npm ls react-dom только с одним импортом. Я также пробовал тест, описанный на странице ошибки:

// Add this in node_modules/react-dom/index.js
window.React1 = require('react');

// Add this in your component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2);

Что возвращает false , однако как мне отследить «другую» версию реакции, которая импортируется зависимостью? Кажется, это происходит только тогда, когда я импортирую компонент диалогового окна Material UI , это происходит, как только нажмите кнопка, которая запускает его для рендеринга. Я могу использовать другие компоненты, такие как List и ListItems и т. д.

Я пробовал форсировать разрешения , и это тоже не исправило.

Я не использую веб-пакет (действительно небольшой проект), поэтому сборка происходит с react-scripts build , если это имеет значение.

Переписать: я просто заменю свой вопрос ссылкой на решение (и, возможно, запрос на еще большую ясность терминов в документах для нас, чайников? :))

Задний план:
Я пытался скомпилировать webpack функциональный компонент с хуками в актив, где этот компонент можно было вызвать из vanilla JS в браузере.

Например,

function Example() {
    const [count, setCount] = React.useState(0);

    return <button onClick={() => setCount(count + 1)}>
        You clicked {count} times
    </button>;
}
export default Example;

... который я хотел экспортировать как отдельный модуль, и после загрузки этого актива использовать его непосредственно из HTML, аналогично:

<script defer>
            ReactDOM.render(
                ExportedCompiledExample.default(props),
                document.getElementById("my_element")
            );
</script>

У меня это работало давным-давно, пока компонент не содержал хуков_. Но при использовании хуков я продолжал сталкиваться с этим ужасным сообщением об ошибке.

Потрясающе простое решение
Я следовал _множеству_ более сложных отвлекающих маневров (несколько версий/экземпляров react/reactDOM, импорт npm и скрытые вторичные зависимости, react-hot-loader, настройка webpack, внешние компоненты, различные соглашения о пакетах/модулях/библиотеках, структура после компиляции.. .), прежде чем попробовать это, что сработало:

export default () => <Example />;

(или export default props => <Example {...props} /> , где применимо).

Думаю, в ретроспективе 20/20 это имеет смысл.

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

Моя интерпретация такова, что это , из примеров...

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

... сам по себе НЕ является функциональным компонентом ? Это становится так в правильном контексте вызова (так что не Example() , а <Example /> ).

Я предполагаю, что мог пропустить это где-то еще в документации, но если нет: это сэкономило бы мне много времени, если бы немного контекста использования (или просто настройка модуля ES) было включено/упомянуто/связано с ним. :) Тем более, что прямая версия export default Example работает без хуков.

Спасибо за рабочее решение @apieceofbart! Моя проблема была связана со ссылкой npm.

Вот как я заработал с приложением Create React, где конфигурация Webpack скрыта по дизайну. Это может быть и ваше решение @florianzemma?

1. npm install -D react-app-rewired
2. Создайте файл с именем config-overrides.js в корне вашего проекта.

// config-overrides.js
module.exports = function override(config, env) {
  const path = require('path');

  return {
    ...config,
    resolve: {
      ...config.resolve,
      alias: {
        ...config.resolve.alias,
        react: path.resolve('./node_modules/react')
      }
    }
  };
}

1. Замените соответствующие команды react-scripts ... в package.json на react-app-rewired ... .

Я надеюсь, что это помогает

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

Обходной путь пряжи

Я использую Yarn и исправил это, задав разрешение в моем package.json :

  "resolutions": {
    "**/react": "16.7.0-alpha.2",
    "**/react-dom": "16.7.0-alpha.2"
  },

Помимо добавления разрешения в родительском приложении (использующей библиотеку), я обновил зависимости библиотеки с помощью следующих команд:

1. yarn add link:/path/to/parent-app/node_modules/react
2. yarn add link:/path/to/parent-app/node_modules/react-dom

После этого я повторно связал библиотеку в родительском приложении с помощью yarn add link:/path/to/library

Привет
Я сталкиваюсь с той же проблемой с рабочими пространствами пряжи.
У меня такой макет:

Рабочее пространство/
├── библиотека/
├── приложение1/
├── приложение2/

app1 и app2 имеют прямые зависимости для реакции v16.9.0, react-dom v16.9.0 и «библиотеки».
«библиотека» имеет одноранговую зависимость от реакции v16.9.0, но также зависимость разработчиков от сборника рассказов.
Проблема, кажется, исходит из сборника рассказов, который зависит от реакции v16.13.1.
Однако, когда я запускаю установку пряжи, я получаю реакцию 16.13.1 в моих узлах верхнего уровня node_modules и реакцию 16.9.0 в локальных узлах_модулей приложений app1 и app2.

Когда я запускаю app1 (созданный с помощью CRA), он использует свою локальную реакцию v16.9.0, но компоненты из «библиотеки» используют React v16.13.1.

Мне кажется, это проблема с логикой подъема пряжи, определением веб-пакета create-реагировать-приложения или и тем, и другим?
Кто-нибудь знает обходной путь для этого сценария?

Привет
Я сталкиваюсь с той же проблемой с рабочими пространствами пряжи.
У меня такой макет:

Рабочее пространство/
├── библиотека/
├── приложение1/
├── приложение2/

app1 и app2 имеют прямые зависимости для реакции v16.9.0, react-dom v16.9.0 и «библиотеки».
«библиотека» имеет одноранговую зависимость от реакции v16.9.0, но также зависимость разработчиков от сборника рассказов.
Проблема, кажется, исходит из сборника рассказов, который зависит от реакции v16.13.1.
Однако, когда я запускаю установку пряжи, я получаю реакцию 16.13.1 в моих узлах верхнего уровня node_modules и реакцию 16.9.0 в локальных узлах_модулей приложений app1 и app2.

Когда я запускаю app1 (созданный с помощью CRA), он использует свою локальную реакцию v16.9.0, но компоненты из «библиотеки» используют React v16.13.1.

Мне кажется, это проблема с логикой подъема пряжи, определением веб-пакета create-реагировать-приложения или и тем, и другим?
Кто-нибудь знает обходной путь для этого сценария?

Единственное решение, которое я нашел для этого, состояло в том, чтобы yarn run eject приложение CRA и изменить порядок раздела resolve с:

```javascript
модули: ['node_modules', paths.appNodeModules].concat(
modules.additionalModulePaths || []
),
````

к
```javascript
модули: [paths.appNodeModules, 'node_modules'].concat(
modules.additionalModulePaths || []
),
````

Мне кажется странным, что «appNodeModules» не имеет наивысшего приоритета — конечно, рассматриваемое приложение следует отложить, когда дело доходит до разрешения зависимостей?

Я столкнулся с проблемой «хуков» в настройках, связанных с Webpack и Electron. Мой проект зависит от модуля A, который сам входит в комплект Webpack (и который я создал сам). Я внедрил React из A (объявив его модулем commonjs2). Это исключает файлы React из пакета библиотек.

Моя основная программа, работающая в процессе Electron Renderer, также использует React. Я попросил Webpack включить React в комплект (без специальной настройки).

Однако это привело к проблеме «перехватчиков» из-за двух экземпляров React в среде выполнения.

Это вызвано такими фактами:

• модуль A «требует» React, и это решается модульной системой Electron. Итак, Electron берет React из node_modules;
• основная программа использует среду выполнения Webpack для «загрузки» React из самого пакета.
• и у Electron, и у среды выполнения Webpack есть собственный кеш модулей...

Мое решение состояло в том, чтобы вывести React из основной программы. Таким образом, и основная программа, и модуль A получают свой React от Electron — единственный экземпляр в памяти.

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

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

Ну наконец то...

//webpack.config.js

module.exports = {
  ...
  externals: {
      react: 'react',
  },
}

У Vue3 такая же проблема

Я решил эту проблему, поставив react и react-dom как peerDependencies в моем package.json моей внешней библиотеки, которая использует React.

  "peerDependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },

Я предполагаю, что мог пропустить это где-то еще в документации, но если нет: это сэкономило бы мне много времени, если бы немного контекста использования (или просто настройка модуля ES) было включено/упомянуто/связано с ним. :) Тем более, что прямая версия export default Example работает без хуков.

Привет @espen42 ,
Я очень надеялся, что ваше решение поможет нам. Мы буквально пробовали _все_, как вы упомянули.

К сожалению, ваше решение тоже не помогает. Интересно, может я просто что-то пропустил?

Итак, в пакете (я назову его @bla/bla) у нас есть index.js , в котором есть компонент с хуками, например

function Bla = ({...props]) => {
const [bla, setBla] = useState(false);
return bla ? <div {...props} /> : 'no luck';
}

Мы компилируем пакет, используя npx babel .

Мы связываем этот пакет с npm link , а затем включаем его в проект как npm link @bla/bla .
И пакет, и проект используют одну и ту же версию React и react-dom.

В проект включаем такой пакет:

import Bla from `@bla/bla`

const RenderBla = ({...props}) => <Bla {...props} />

export default RenderBla

К сожалению, ошибка все еще сохраняется.
Invalid hook call. Hooks can only be called inside of the body of a function component.

Что мы можем упустить?

"externals": {
  "react": "react",
  "react-dom": "react-dom"
}

Это решило проблему для меня, большое спасибо, чувак ❤️

Ошибка настройки поля при доступе по внешней ссылке (Sharepoint Online)

Расширение настройщика поля spfx с несколькими компонентами пользовательского интерфейса Fabric, при доступе по ссылке, получающее одну из следующих ошибок в зависимости от версии FabricUI:
https://reactjs.org/docs/error-decoder.html/?invariant=321 ,
https://reactjs.org/docs/error-decoder.html/?invariant=290&args []=A.%20Общие

при обновлении страницы все работает нормально.
Я не использовал в коде никаких React Hooks, только React Components.
Рефами тоже не пользовался.

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

Пробовали разные версии fabic ui, 6.189.2, 6.214.0 и 7.114.1, а также пытались заменить все ссылки на Fabric-UI на Fluent UI, но проблема не устранена.

проверил версии реакции, вот вывод
нпм лс реагировать
+-- @microsoft/sp- webpart [email protected]
| +-- @microsoft/ [email protected]
| | -- [email protected] deduped | +-- @microsoft/[email protected] | | -- реакция@16.8.5 дедуплицирована
| +-- @microsoft/sp-property-pane@ 1.9.1
| | -- [email protected] deduped | -- [email protected] дедупликация
`-- реагировать@16.8.5

Всем привет,
Я также наткнулся на эту досадную ошибку. В моем случае это также была ошибка конфигурации моей сборки веб-пакета в конце. Но ни одна из предложенных вещей в этом выпуске не сработала для меня. Так что тоже хочу поделиться своим опытом.

Моя страница включает в себя несколько точек входа, а плагин SplitChunkPlugin может создавать фрагменты времени выполнения. Поскольку мы используем гем rails-webpacker, он по умолчанию настроен на создание среды выполнения для каждого фрагмента. Но webpack по умолчанию делает что-то подобное, он включает среду выполнения внутри чанков.

Конечно документация предупреждает об этом случае, но надо найти. Установка optimization.runtimeChunk в single создаст отдельную среду выполнения. Это предотвратит создание вашей сборкой нескольких копий реакции при использовании реакции из нескольких точек входа.

См. https://webpack.js.org/configuration/optimization/#optimizationruntimechunk .

Всем привет,
У меня проблема в том, что я хочу использовать внешнюю библиотеку, которая поступает из CDN и включена в тег <script> , поэтому я мало что могу сделать с самим кодом. В библиотеке используются реакции и хуки, поэтому я получаю
Ошибка 3. You might have more than one copy of React in the same app .
К сожалению, для библиотеки нет пакета NPM: https://github.com/Anyline/anyline-ocr-anylinejs-module
Я использую CRA, и проект не выбрасывается.

Создал небольшой пример Sandbox .

Он выдает ту же ошибку, поскольку другой пакет также использует хуки, но со своим собственным React. Мне пришлось опубликовать свой пакет в NPM, а затем импортировать его напрямую из NPM. Это

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

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

Кодовая песочница

Тест, который загружает «Приложение», проходит статически. Два теста, которые загружают его динамически (один с использованием require , другой с использованием import в качестве функции), оба дают ошибку.

Почему меня это вообще волнует: я пытаюсь написать несколько тестов, в которых я использую jest.doMock для имитации некоторых вещей, а затем динамически загружаю модуль, который хочу протестировать, в соответствии с документацией . Я использую doMock вместо Mock, потому что мне нужно иметь возможность по-разному издеваться над разными функциями. Вы заметите, что ошибка возникает без каких-либо насмешек.

Он выдает ту же ошибку, поскольку другой пакет также использует хуки, но со своим собственным React. Мне пришлось опубликовать свой пакет в NPM, а затем импортировать его напрямую из NPM. Это

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

@catsheue был для тебя React1 === React2 true ?
я не публиковал свой в npm, но хотел знать, в этом ли причина

мой кажется React1 === React2 = true и не нашел решения, почему это происходит, когда я импортирую свою библиотеку реагирования в проект

Была такая же проблема с использованием yarn link для тестирования локальной библиотеки. Моя ошибка заключалась в том, что я указывал react и react-dom как зависимости разработчиков, а не одноранговые.

Так что я должен был сделать yarn add --peer react react-dom . Наконец, поскольку я уже совершил ошибку, зафиксировав React как зависимость от разработчиков, мне нужно было удалить node_modules из моей библиотеки. rm -rf node_modules; yarn решил проблему для меня.

Я тоже столкнулся с этой проблемой. В моем случае это было вызвано дублированием React из Storybook (v6.0.28). Я считаю, что вы можете найти больше информации здесь .

Я удалил зависимости Storybook, удалил node_modules и снова запустил yarn install . Это сработало для меня. Я надеюсь, что это поможет кому-то избежать слез и потраченных впустую часов на это.

Этот обходной путь работает и для меня. Я использую функции Firebase и имею папку node_modules как в корне моего проекта, так и в каталоге /functions/ . Если я удалю /functions/node_modules , мое приложение будет работать нормально. Это обходной путь, но он довольно раздражает. Кто-нибудь нашел обходной путь, позволяющий одновременно существовать обеим папкам node_modules ?

Для потомков и всех, кто может столкнуться с этой проблемой при использовании mdbootstrap в приложении, созданном с помощью create-react-app .

Я видел эту ошибку при добавлении различных компонентов mdbootstrap, таких как кнопки и изображения карт. Вывод консоли, добавленный в index.js для устранения неполадок в соответствии со статьей поддержки React, возвращал true при сравнении версий. Поэтому мне пришлось попробовать что-то еще.

Исправление состояло в том, чтобы запустить npm dedupe

npm ls react

+-- [email protected]
| `-- [email protected]
`-- [email protected]

npm dedupe

npm ls react

+-- [email protected]
| `-- [email protected]  deduped
`-- [email protected]

После этого все компоненты заработали нормально. Счастливые дни.

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

Кодовая песочница

Тест, который загружает «Приложение», проходит статически. Два теста, которые загружают его динамически (один с использованием require , другой с использованием import в качестве функции), оба дают ошибку.

Почему меня это вообще волнует: я пытаюсь написать несколько тестов, в которых я использую jest.doMock для имитации некоторых вещей, а затем динамически загружаю модуль, который хочу протестировать, в соответствии с документацией . Я использую doMock вместо Mock, потому что мне нужно иметь возможность по-разному издеваться над разными функциями. Вы заметите, что ошибка возникает без каких-либо насмешек.

@ miket01 miket01 Именно то, что я пытаюсь сделать (но без насмешек). Вы нашли какое-нибудь решение?

Столкнулся с этим:

function HeadedSection (props) {
   if (!ReactDOMServer.renderToStaticMarkup(props.children))
        return null;

    const [hidden, set_hidden] = useState(props.hidden);

Исправлено путем вызова useState сначала:

function HeadedSection (props) {
    const [hidden, set_hidden] = useState(props.hidden);

    if (!ReactDOMServer.renderToStaticMarkup(props.children))
        return null;

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

Я использую нулевые хуки в своей программе. Существует ровно одна копия react и одна копия react-dom , и это одна и та же версия. Нет ссылок.

Это частично сработало до того, как я недавно попытался обновить несколько пакетов, чтобы исправить проблемы с безопасностью. Я использую next.js, и исправление заключалось в том, чтобы исключить некоторые подкомпоненты из компонента верхнего уровня, обернув их в {typeof window !== 'undefined' , но теперь это тоже не работает.

[18:50:42] (master) questions
// ♥ npm ls react
[email protected] /Users/Dan/work/b/questions
└── [email protected]

[22:46:34] (master) questions
// ♥ npm ls react-dom
[email protected] /Users/Dan/work/b/questions
└── [email protected]

[22:46:55] (master) questions
// ♥ npm dedupe
removed 55 packages, moved 46 packages and audited 1712 packages in 65.449s

33 packages are looking for funding
  run `npm fund` for details

found 26 vulnerabilities (15 low, 3 moderate, 8 high)
  run `npm audit fix` to fix them, or `npm audit` for details

Ошибка возникает, потому что ReactCurrentDispatcher.current === null , но я не могу найти нигде в /node_modules/react/cjs/react.development.js , где для этого установлено что-то.

Может ли кто-нибудь сказать мне, где ReactCurrentDispatcher.current должно получить значение?
https://github.com/facebook/react/search?p=2&q=%22ReactCurrentDispatcher.current+%3D%22&type=code

Это похоже на кандидата, но этот код не содержится в моем react-development.js . Должно ли это быть?

    const prevPartialRenderer = currentPartialRenderer;
    setCurrentPartialRenderer(this);
    const prevDispatcher = ReactCurrentDispatcher.current;
    ReactCurrentDispatcher.current = Dispatcher;

https://github.com/facebook/react/blob/702fad4b1b48ac8f626ed3f35e8f86f5ea728084/packages/react-dom/src/server/ReactPartialRenderer.js#L859

Я получаю эту ошибку при рендеринге на стороне сервера на next.js , и этот код находится в исходном коде под react-dom/server . Как я могу определить, правильно ли /node_modules/react/cjs/react-development.js ?

ОБНОВЛЕНИЕ: Это была проблема. Я отредактировал webpack.config.externals в своем файле next.config.js
https://github.com/vercel/next.js/issues/17592#issuecomment-712443172

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