反应库中的反应挂钩给出无效的挂钩调用错误

Question

我使用 https://www.npmjs.com/package/create-react-library 创建了一个反应库并在其他 React 项目中成功使用。但是当我尝试在库中使用 react hooks 功能时，它给了我以下错误。

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
    1. You might have mismatching versions of React and the renderer (such as React DOM)
    2. You might be breaking the Rules of Hooks
    3. You might have more than one copy of React in the same app
.....

我的图书馆 我只是尝试在我的组件中按如下方式使用 useState。

import React, { useState } from 'react'

const General = (props) => {

    const [count, setCount] = useState(0);
    return (
        <div>
           General component
        </div>
    )
}

export default General

我正在使用 "react": "^16.8.6" 和 "react-dom": "^16.8.6"

我的 React 应用程序 使用 https://github.com/facebook/create-react-app 创建了一个应用程序并按如下方式使用上面的库。

import Reactfrom 'react'
import { General } from 'my.lib'
const accountSummary = props => {

  return (
    <div>
      <General>
    </div>
  )
}

export default accountSummary

两者都有相同的 React 版本并且库使用了相同的 React-dom 和 peerDependencies

的 React 版本

Answer 1

我用 create-react-library 创建了一个 React 库，这个库是你的 General 组件。我已经在此处 https://www.npmjs.com/package/Whosebug-test and a React app for use it here https://codesandbox.io/s/mm7yl83o28.

将其发布到 npm

只需单击 General component 文本，count 就会递增。

我无法重现您的问题，请使用此测试来检查您的实施情况。

Answer 2

我在我的应用程序中包含了我的组件库（就此而言，任何库），就像@Janith 使用 my-comp-lib:"file:../.." 所做的那样（我不想每次我想测试时都发布）并且我遇到了同样的问题。

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

You might have mismatching versions of React and the renderer (such as React DOM)

You might be breaking the Rules of Hooks

You might have more than one copy of React in the same app See react-invalid-hook-call for tips about how to debug and

fix this problem

我能够通过让我的应用程序和库指向相同的反应（包）位置来解决这个问题。

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

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

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

有效！！

请参阅以下链接了解更多详情..

https://github.com/facebook/react/issues/14721

https://github.com/facebook/react/pull/14690

https://github.com/facebook/react/issues/13991

注意：如果您将包发布到 artifactory 并安装，则不会发生此问题，因为您将 react 和 react-dom 作为对等依赖项，它们不会包含在分发中。所以你的包和应用程序使用安装在应用程序中的相同反应。

Answer 3

我刚刚运行遇到了同样的问题。我能够通过在我的示例应用程序中指向与我的库中相同的反应来修复它：

应用结构

根目录

例子
- package.json
src（库）
package.json

因此，根据示例 > package.json 我将反应更改为：

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

这与上面列出的 npm link 非常相似，但它不会在您每次 npm 安装时消失。

Answer 4

当我将 link 从应用程序更改为 "link:../" 而不是 "file:../" 时，它对我有用，除了 linking 反应和反应-dom.

Answer 5

添加到您的组件库 package.json

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

这样您的 lib 包将使用与主应用相同的 react 包。 https://nodejs.org/es/blog/npm/peer-dependencies/

Answer 6

React 17 + React Testing Library + Umi(前端框架，内置react-router)

就我而言，当我运行单元测试时，我收到一条错误消息“无效挂钩调用”。

经过一段时间的尝试，找到了两种解决方法

降级到 React 16.x，然后一切都会好起来的。
继续使用 React 17.x，并且
- 还要写import React from 'react'
- 单独安装react-router-dom

我觉得可能是react-router的问题，但是由于自己理解有限，暂时还没有更好的解决办法

Answer 7

同时检查您的 npm 版本。我的版本是7.0.8，已经过时了，改成6.14.8后一切正常！

Answer 8

在 React NATIVE 中使用真实应用程序进行测试时

我有同样的问题，我删除了自定义库中的 node_module 文件并修复了它..

安装直接模块时出现问题

yarn 添加 c:/user......./react-native-some-lib

Answer 9

我遇到了同样的问题，使用 rush monorepo，配置 ui-package 并使用 nextjs 构建应用程序ui。

解决方案是在 package.json

上添加以下代码

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

在图书馆的 package.json:

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

在此处查看更多内容：https://github.com/vercel/next.js/issues/9022#issuecomment-728688452

Answer 10

就我而言，我正在构建自己的公共库。虽然我是从 "react" 导出 createContext、useContext 和 useState，但我只是忘了导入默认导出 React.

从此更改我的导入语句：
import { createContext, useContext, useState } from "react";

对此：
import React, { createContext, useContext, useState } from "react";

帮我修好了。您可能必须在从反应库导出的每个 React component/context 等中执行此操作。

编辑：

在我的另一个依赖这个公共库的应用程序中，这个问题也已使用 npm link 解决，如 React 文档 (Invalid Hook Call Warning) 中所述：

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

所以就我而言，我导航到我的公共图书馆和运行 npm link ../path-to-my-app/node_modules/react。

编辑 (23/02/2022)

希望是最后的编辑 - 如果所有应用程序都希望使用相同的版本，另一个解决方案是简单地全局安装问题依赖项，例如npm install react -g

反应库中的反应挂钩给出无效的挂钩调用错误

React hooks in react library giving Invalid hook call error

reactjs

react-router-dom

react-hooks