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 APP 使用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

两者的反应版本相同，并且库使用的反应域和反应版本与peerDependencies

Answer 1

我就像@Janith使用my-comp-lib:"file:../.."一样在我的应用程序中包括了我的组件库（对于这个问题，任何库都包括在内）（我不想每次都进行测试就发布），并且遇到了相同的问题。

无效的挂钩调用。钩子只能在   功能组件。可能发生以下情况之一   原因：


您可能使用的React和渲染器版本不匹配（例如React DOM）

您可能正在违反挂钩规则

您可能在同一应用中拥有多个React副本。有关如何调试和调试的提示，请参见react-invalid-hook-call


解决此问题

我能够通过使我的应用程序和库指向相同的react（包）位置来解决此问题。

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

注意：如果将软件包发布到工件并安装，则不会发生此问题，因为您将具有对等依赖关系，并且它们不会包含在发行版中。因此，您的程序包和应用程序使用的是与应用程序中安装的相同的反应。

Answer 2

添加到组件库的package.json

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

，以便您的lib软件包将使用与主应用程序相同的react软件包。 https://nodejs.org/es/blog/npm/peer-dependencies/

Answer 3

我用create-react-library创建了一个React库，这个库是您的General组件。我已经在https://www.npmjs.com/package/stackoverflow-test处将其发布到npm，并在https://codesandbox.io/s/mm7yl83o28处将其发布到了一个React应用。

只需单击General component文字，count就会增加。

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

Answer 4

我只是遇到了同样的问题。我可以通过指向示例应用程序中与库中相同的反应来修复它：

应用程序结构

根

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

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

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

这很像上面列出的npm link，但是每次npm安装时它都不会消失。

Answer 5

也许这会有所帮助：

Link - how to create react component npm package with example

Answer 6

除了链接react和react-dom之外，当我将应用程序到库的链接更改为“ link：../”而不是“ file：../”时，它对我有用。

Answer 7

React 17 + React 测试库 + Umi（前端框架，内置 react-router）

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

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

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

我认为可能是 react-router 的问题，但由于我的理解有限，我还没有更好的解决方案。

Answer 8

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

Answer 9

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

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

安装直接模块时的问题

yarn add c:/user......./react-native-some-lib

Answer 10

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

解决方案是在 package.json

上添加以下代码

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

在图书馆的package.json：

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

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

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

10 个答案: