npm/yarn link 测试包时报错 Warning: Invalid hook call. Hooks can only be called ...

简介: npm/yarn link 测试包时报错 Warning: Invalid hook call. Hooks can only be called ...
  • 使用 dumi 开发 React 组件库时,为避免每次修改都发布到 npm,需要在本地的测试项目中使用 npm link 为组件库建立软连接,方便本地调试。
  • 结果在本地测试项目使用 $ npm link 组件库 后,使用内部组件确报错:
react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
  • 报错信息中提供了三种可能的原因,针对这三个可能原因逐一检查:
  1. React HooksReact 16.8.0 版本中引入的,先检查 reactreact-dom 的版本。发现是高于 16.8.0 的,支持 React Hook。排除
  2. 检查是否违背了调用 hook 的规则。然而组件中并未使用 hook,但是依赖的第三方库使用了 hook,并且使用方式是正确的;排除
  3. 检查项目中是否存在多个不同版本的 react 。发现测试项目和组件库中都存在 react 依赖,但是组件库中的 package.json 中已经将 reactreact-dom 都添加到了 peerDependencies 属性中。待定
  • 极有可能是因为第三条导致了问题,继续查阅文档,官网 在此处 给出过可能的原因。
    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 引发了问题,猜测使用 npm link 时,不会忽略 package.json 中的 peerDependencies 选项,而组件库中 react 版本依赖都存放在这个选项内。

  • 解决方案
    例如:组件库项目根路径(/Users/xxx/Desktop/design)、测试项目根路径(/Users/xxx/Desktop/testlink)。
    测试项目 中软链接 组件库项目 中安装的 react 版本即可,如果还未解决,再将 react-dom 也进行软链接到测试项目。
# 1、进入测试项目
$ cd /Users/xxx/Desktop/testlink
# 2、软链接组件库中安装的 react 版本
$ npm link /Users/xxx/Desktop/design/node_modules/react
# (备用)如果还是报错,可在链接 react-dom,但是一般不需要,link react 基本也就解决了。
$ npm link /Users/xxx/Desktop/design/node_modules/react-dom
# 3、重新跑测试项目,确保组件库项目包正确,可以重新打包,在到测试项目中 link 组件库包,并重启测试测试项目。
  • 还有个解决方案:删除组件库项目 node_modules 文件夹内的 react 包也可以解决,原理都一样,两者存在一个版本的 react 包即可,但是这种方式不推荐,毕竟删了打包组件库时就报错了,还得重新 npm i 安装依赖。
相关文章
|
4天前
|
存储 资源调度 JavaScript
一文带你了解PNPM以及 npm,yarn,pnpm区别
一文带你了解PNPM以及 npm,yarn,pnpm区别
|
2月前
|
自然语言处理 机器人 Python
ChatGPT使用学习:ChatPaper安装到测试详细教程(一文包会)
ChatPaper是一个基于文本生成技术的智能研究论文工具,能够根据用户输入进行智能回复和互动。它支持快速下载、阅读论文,并通过分析论文的关键信息帮助用户判断是否需要深入了解。用户可以通过命令行或网页界面操作,进行论文搜索、下载、总结等。
67 1
ChatGPT使用学习:ChatPaper安装到测试详细教程(一文包会)
|
2月前
|
缓存 资源调度 JavaScript
npx与npm的差异解析,以及包管理器yarn与Node版本管理工具nvm的使用方法详解
npx与npm的差异解析,以及包管理器yarn与Node版本管理工具nvm的使用方法详解
66 0
|
4月前
|
测试技术 开发工具 Python
在Jetson Nano上编译 pyrealsense2库包,并在Intel的tof相机上进行测试
在Jetson Nano上编译 pyrealsense2库包,并在Intel的tof相机上进行测试
197 0
|
4月前
NPM——"xxxx" is invalid for new packages
NPM——"xxxx" is invalid for new packages
35 0
|
6月前
|
存储 缓存 资源调度
你真的知道 NPM、Yarn 与 PNPM 这三个前端包管理器之间的区别吗?
【6月更文挑战第9天】NPM、Yarn和PNPM是主流前端包管理器,各有特色。NPM生态庞大,易用但速度慢;Yarn速度快,依赖管理稳定;PNPM性能优异,节省磁盘空间。Yarn和PNPM在速度和确定性上胜出,NPM因广泛使用和丰富资源领先。开发者可根据项目需求和喜好选择,三者共同推动前端开发进步。
160 8
|
6月前
|
资源调度
npm yarn 启动报错【已解决】
npm yarn 启动报错【已解决】
65 2
|
5月前
|
测试技术 数据安全/隐私保护 索引
基于SpringBoot+Vue大学生体质测试管理系统【源码+论文+演示视频+包运行成功】(2)
基于SpringBoot+Vue大学生体质测试管理系统【源码+论文+演示视频+包运行成功】
49 0
|
5月前
|
Java 关系型数据库 MySQL
基于SpringBoot+Vue大学生体质测试管理系统【源码+论文+演示视频+包运行成功】(1)
基于SpringBoot+Vue大学生体质测试管理系统【源码+论文+演示视频+包运行成功】
83 0
|
6月前
|
存储 缓存 资源调度
npm、yarn与pnpm详解
npm、yarn与pnpm详解
146 0

推荐镜像

更多