-
使用
dumi开发React组件库时,为避免每次修改都发布到npm,需要在本地的测试项目中使用npm link为组件库建立软连接,方便本地调试。 -
结果在本地测试项目使用
$ npm link 组件库后,使用内部组件确报错:jsreact.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. -
报错信息中提供了三种可能的原因,针对这三个可能原因逐一检查:
-
React Hooks是React 16.8.0版本中引入的,先检查react和react-dom的版本。发现是高于16.8.0的,支持 React Hook。排除 -
检查是否违背了调用
hook的规则。然而组件中并未使用hook,但是依赖的第三方库使用了hook,并且使用方式是正确的;排除 -
检查项目中是否存在多个不同版本的
react。发现测试项目和组件库中都存在react依赖,但是组件库中的package.json中已经将react和react-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也进行软链接到测试项目。sh# 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安装依赖。
npm/yarn link 测试包时报错 Warning: Invalid hook call. Hooks can only be called ...
卡尔特斯2023-09-11 12:30
相关推荐
其实防守也摸鱼16 分钟前
个人学习 Pwn 思路:从基础到漏洞利用的进阶路径朱涛的自习室1 小时前
212 个需求、22 万行代码:Agent 接管开源项目的 19 天aZhe的全栈知识分享1 小时前
AI 还原 Figma 效果总达不到预期?先别急着让它写代码review445431 小时前
Codex Hooks 入门实战:生命周期事件、matcher 与5分钟跑通一个钩子函数小陈1 小时前
阿里云部署DSH与RAM完成运维用户499335025071 小时前
JS 作用域劫持的死穴:动态 this 穿透,以及 AST 怎么救IT_陈寒2 小时前
React的setState真是个演员,你以为它同步其实在装睡孟健4 小时前
Claude Code 同需求写两版对比:装不装 frontend-design 差多远?梦de天空一米16885 小时前
【一个重复id让游戏卡在62%,聊聊配置表检查】ryn483985 小时前
01 一个功能模块,怎么分层才不乱