i使用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
i的相同反应版本和反应版本(因此在我的应用程序中,任何库(如@janith所做的使用my-comp-lib:"file:../.."
(我不想每次要测试时发布(,并且遇到了同样的问题。
无效的挂钩呼叫。钩只能在体内的内部调用 功能组件。这可能发生在以下一个 原因:
- 您可能有不匹配的反应版本和渲染器(例如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
注意:如果您将软件包发布到文物并安装,则不会发生此问题,因为您会做出反应&amp;反应是作为同伴依赖性的,它们不会被包含在分布中。因此,您的软件包和应用程序使用应用程序中安装的相同反应。
我只是遇到了同一问题。我能够通过指向我的示例应用程序中的相同反应来解决它:
应用结构
root
- 示例
- package.json
- src(library(
- package.json
所以,从示例> package.json我更改为:
"react": "link:../node_modules/react",
这很像上面列出的npm link
,但每次安装NPM时都不会消失。
我遇到了相同的问题,使用Rush MonorePo,配置UI包装并使用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
组件库的package.json
"peerDependencies": {
"react": "<your version>"
}
,您的LIB软件包将使用与主应用相同的react
软件包。https://nodejs.org/es/blog/npm/peer-depperencies/pp>
当我将链接从应用程序更改为应用程序时,它对我有用除了链接react and react-dom。React 17 React测试库 UMI(前端框架,内置React-Router(
在我的情况下,当我运行单元测试时,我收到了一条错误消息,"无效挂钩呼叫"。
经过一段时间的尝试,我找到了两种解决方法。
- 降级为16.x,然后一切都可以。
- 继续使用React 17.x,并且
- 仍然必须写
import React from 'react'
- 安装
react-router-dom
单独
- 仍然必须写
我认为这可能是React-Router的问题,但是由于我的理解有限,我还没有更好的解决方案。
还检查您的NPM版本。我的版本是7.0.8,它已过时,将其更改为6.14.8,一切正常!
在使用Real App进行测试时React Native
我有同样的问题,我在自定义库中删除了我的node_module文件,然后修复了它。
安装直接模块时问题
纱添加c:/user ..../react-native-native-some-lib
在我的情况下,我正在构建自己的普通库。尽管我从"react"
导出createContext
,useContext
和useState
,但我只是忘记了默认导出,React
。
从此更改我的导入语句:
import { createContext, useContext, useState } from "react";
对此:
import React, { createContext, useContext, useState } from "react";
为我修复了它。您可能必须在您从React库中导出的每个React组件/上下文等中执行此操作。
编辑:
在我的另一个依赖这个公共库的应用程序中,此问题也使用了React文档中所述的npm link
(无效的挂钩呼叫警告(:
当您使用NPM链接或同等标准时,此问题也可能出现。在这种情况下,您的捆绑器可能会"看到"两个反应 - 一个在应用程序文件夹中,一个在您的库文件夹中。假设MyApp和Mylib是兄弟姐妹文件夹,一个可能的解决方法是运行NPM链接../myapp/node_modules/react从mylib运行。这应该使库使用应用程序的React副本。
因此,在我的情况下,我导航到我的普通库并运行npm link ../path-to-my-app/node_modules/react
。
编辑(23/02/2022(
希望最终的编辑 - 另一个解决方案是,如果所有应用都希望使用相同版本,例如 npm install react -g
我已经使用create-react-library
创建了一个React库,此库是您的General
组件。我已将其发布到npm,此处https://www.npmjs.com/package/stackoverflow-test和一个用于使用的React应用程序https://codesandbox.io/smmm7yl83o28。
只需单击General component
文本和count
即将增加即可。
我无法复制您的问题,只需使用此测试检查您的实现。