npm link 引发的 Invalid hook call 问题

2023-10-27

项目场景:

开发React组件库(假设路径为 /workspace/ui)时,为了避免每次修改都发布到 npm,在本地的测试项目(假设路径为 /tmp/test)中使用 npm link 为组件库建立软连接,方便本地调试。


问题描述:

不幸的是,发生了 Invalid hook call 的错误。
版本冲突报错


原因分析:

报错信息中提供了三种可能的原因,针对这三个可能原因逐一检查。

  1. 检查 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,这样就不会存在版本冲突的问题。

# 进入组件库项目
cd /workspace/ui
# 为react建立软连接,连接到测试项目的 node_modules下的react
npm link /tmp/test/node_modules/react

然后记得重启测试项目

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

npm link 引发的 Invalid hook call 问题 的相关文章

  • 运行 npm install Brain.js 时出现奇怪的 npm 错误

    尝试安装时brain js 发生了一个奇怪的错误 我不明白问题是什么以及 python 从哪里来 因为这是通过安装库npm 谷歌没找到类似的情况 我也不太明白how谷歌这个 G firststep BR gt npm i brain js
  • npm 安装 Angular/CLI 错误

    node v 8和 npm v5 正在尝试安装角度 cli从昨天开始全球范围内 每次都会遇到新的错误 Vipins Air vipingupta sudo npm install g angular cli npm 错误 代码 ETIMED
  • 创建shell可执行全局节点模块

    我尝试创建节点模块 我成功了 我用了npm install g在代码目录中 它创建了这个模块文件夹 AppData Roaming npm node modules myfirstmodule 现在我想让一个文件作为命令可执行 例如 pm2
  • npm install [package] 删除软件包

    npm install package 命令正在删除其他软件包 我必须运行 npm install 命令来重新安装它们 这是一项繁琐的任务 所有包都记录在 package json 和 package lock json 文件中 如果我 n
  • 运行 npm install 时出错 Error: 404 Not Found: 7zip-bin@~4.1.0

    当我运行 npm install 时 我看到此错误 3 verbose stack Error 404 Not Found 7zip bin 4 1 0 2293 verbose stack at fetch then res C cygw
  • npm 脚本:node-sass 不监视部分 sass 文件

    我有这个项目结构 src assets css sass main scss variables scss 我正在尝试编写一个 npm 脚本 该脚本将监视我的所有 scss 文件 包括部分文件 中的更改 然后仅编译我的 main scss
  • 从React Redux中的package.json获取版本号(create-react-app)

    OP 编辑 如果其他人遇到此问题 该应用程序是使用创建的创建反应应用程序 https github com facebookincubator create react app 这限制导入到 src 文件夹内 但是如果你将react scr
  • 排除 npm 包中的测试代码?

    The 开发依赖 https docs npmjs com files package json devdependenciesnpm 的 package json 文档的部分说要在那里列出您的测试依赖项 以便您的包的用户不必拉取额外的依赖
  • 无法安装js-bson

    我正在使用Windows 7 64位 尝试安装bson作为mongodb的依赖项 我收到此错误 npm WARN package json email protected cdn cgi l email protection No READ
  • 使用 npm API 检索带有版本的私有 npm 包列表,可能吗?

    我在 npmjs org 上有一个私有 npm 注册表 其中包含几个私有 npm 包 我们正在转向内部私人 npm 注册表 verdaccio 长话短说 使用我们的 AWS 基础设施 verdaccio 服务器可能会因多种原因而被重建 主要
  • 将“npm run start”的输出写入文件

    我想捕获的输出npm run start在一个文件中 我遇到了大量错误 我想更好地控制如何筛选输出 当我尝试时 npm run start gt log txt 我得到一个非常简短的文件 8 行 其结尾为 34m 39m 90m wdm 3
  • 使用 NPM 安装 Bootstrap 4 alpha [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 如何使用 NPM 专门安装 Bootstrap 4 Alpha 使用npm install boots
  • 如何上传文件 - sails.js

    我可以下载图像和 pdf 但无法下载文档文件 doc pptx odt 下载文档 doc pptx odt 时 仅将其下载为 ZIP XML 文件 我可以做什么 我在用着 填写上传文件文档 https github com balderda
  • 在 React Web 应用程序中使用 createjs-soundjs

    我想用https www npmjs com package createjs soundjs https www npmjs com package createjs soundjs在 React Web 应用程序上播放声音 我正常安装了
  • 由于预发布,Node 应用程序无法运行

    即使安装成功 我也会安装无效的软件包 顺便说一句 这个问题与答案相关 关于版本控制的问题 https stackoverflow com questions 27628153 npm versioning how does this edg
  • 节点:以编程方式检查包的最新版本

    我希望我的节点包 在 npm 上发布 在新版本可用时提醒用户 如何以编程方式检查已发布软件包的最新版本并将其与当前版本进行比较 Thanks 您可以结合npmview https npmjs com package npmview 用于获取
  • 让 Jest 全局设置和全局拆卸在 TypeScript 项目中工作

    我想运行一个在运行测试之前打开数据库连接的函数 全局设置 以及另一个在运行测试后关闭数据库连接的函数 全局拆卸 目前我有以下配置 包 json jest testEnvironment node globalSetup src jest g
  • 什么是 NPM?为什么需要它? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 以前 我用记事本制作了一些网站 所以我们必须创建一个文件夹 TREE 并在其中放入一个 htm 文件 以及一些文件夹 其中包含 Jav
  • npm3 如何决定安装扁平还是嵌套?

    我的项目依赖于 Angular2 beta 6 另一个项目依赖于 Angular2 beta 0 我的项目的 package json dependencies angular2 2 0 0 beta 6 another project 0
  • 安装 npm 包时无法解决依赖关系树错误

    当尝试使用安装 npm 包时npm i命令 我收到以下异常 我尝试重新安装 Node js 包并使用以下命令将代理设置为关闭 set HTTP PROXY set HTTPS PROXY 问题仍然存在 我做错了什么 Update 当我运行以

随机推荐

  • STM32输出PWM时,PWM1和PWM2的区别

    TIM OCMode PWM2 TIM OCMode PWM1 首先 本人虽然初学STM32但极力反对一种误人子弟的观点 对于STM32这样级别的MCU 有库函数就不用去看寄存器怎么操作的了 好了 言归正传 最近总看到很多朋友对于PWM这个
  • AOP切面的优先级Order属性

    如果有两个切面 那么谁先谁后怎么判断 那如果我们要指定切面的执行顺序呢 可以使用 Order注解指定切面的优先级 值越小优先级越高 举例 两个切面类 Order 2 Aspect Component public class MyAspec
  • jQuery VS AngularJS 你更钟爱哪个?

    在这一次的Web开发教程中 我会尽力解答有关于jQuery和AngularJS的两个非常常见的问题 即jQuery和AngularJS之间的区别是什么 也就是说jQuery VS AngularJS 今天我不会仅仅只是解释两者的差异和列举两
  • 最小二乘法拟合圆心与半径

    公众号 轻松玩转机器人 欢迎关注 1 算法介绍 最小二乘法的目的 通俗来说 就是拟合变量之间的关系 由于现实世界观测的变量存在噪声 找不到完美 不存在误差的关系 因此我们退而求其次 尽可能减小误差影响 误差有正有负 而我们希望消除正负方向的
  • FPGA实现数码管数字累加

    一 基本原理 FPGA数码管简单显示 简单数码管原理上文介绍过 本文主要介绍视觉在1ms内感知不到数码管数字来回切换的变动 1ms内数字跳变 眼睛感知是数字一直在显示 二 代码原理 1 显示模块 1 根据需要显示的数字 取出个 十 百 千位
  • 针对TextView更换字体颜色同时设置不同的点击事件的设计方案

    在需求中我们需要将下面的文字放到一起 并更改不同的颜色进行区分 还需要将用 用户协议 和 隐私政策 添加不同的点击事情 去跳转进行展示不同的说明 首先这是一个弹框 我们需要先去定义它的布局文件
  • 【科普贴】USB_ID介绍

    一 功能介绍 1 当前很多SOC 都支持OTG功能 所以mini micro USB的接口上通常会拓展一个USB ID引脚 如下图 2 USB ID pin 为低电平时 则设备为host模式 比如PC和支持OTG设备做主设备时 USB ID
  • platformio添加外部库文件方法

    方法1 在这里搜索所需要的库函数进行添加到工程里 方法2 常用 1 准备好所需要的库文件 2 打开工程文件夹 完成以上4步后 重启VScode 即可完成库文件添加 方法3 常用 当创建完工程后 在该工程中添加库 方法2是添加全局库的方法 添
  • QT中qrect的使用介绍,超级详细

    QT中qrect的使用 QT是跨平台的GUI应用程序开发框架 使用C 编写 其中 qrect是QT中一个常用的类 用于描述矩形 qrect的函数原型参数介绍 在使用qrect时 我们需要了解以下几个函数原型参数 QRect 构造函数 创建一
  • 基于Python和mysql开发的BBS问答社区管理系统(源码+数据库+程序配置说明书+程序使用说明书)

    一 项目简介 本项目是一套基于Python和mysql开发的BBS问答社区管理系统 主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Python学习者 包含 项目源码 项目文档 数据库脚本等 该项目附带全部源码可作为毕设使用 项
  • Spring、SpringMVC、Spring Boot、Spring Cloud 概念、关系及区别

    注 此文章转载于其他大神 一 正面解读 Spring主要是基于IOC反转Beans管理Bean类 主要依存于SSH框架 Struts Spring Hibernate 这个MVC框架 所以定位很明确 Struts主要负责表示层的显示 Spr
  • MFC扩展库BCGControlBar Pro v33.6亮点 - 流程图、Ribbon Bar功能升级

    BCGControlBar库拥有500多个经过全面设计 测试和充分记录的MFC扩展类 我们的组件可以轻松地集成到您的应用程序中 并为您节省数百个开发和调试时间 BCGControlBar专业版 v33 6已正式发布了 此版本包含了对图表组件
  • anaconda、cuda、pytorch相关

    文章目录 0 00写在最前面 0 Anaconda安装 配置 使用的详细教程 1 MobaXterma远程连接服务器 2 linux系统下配置cuda及pytorch 3 linux操作系统下在conda环境中配置cuda和pytorch
  • Powershell快速入门(三) 实战应用

    好像关于Powershell说的已经差不多了 所以最后一篇文章就来使用Powershell写一些脚本 帮助我们完成一些日常工作 文件管理 常用命令 先来看看常用的文件管理命令 Set Location命令用于切换工作目录 它的别名是cd G
  • 基于SSM+Vue的乐购游戏商城系统

    末尾获取源码 开发语言 Java Java开发工具 JDK1 8 后端框架 SSM 前端 采用Vue技术开发 数据库 MySQL5 7和Navicat管理工具结合 服务器 Tomcat8 5 开发软件 IDEA Eclipse 是否Mave
  • 解放生产力!chatGPT接入Excel与Word教程(需要魔法上网,不用的都是骗人的)

    解放生产力 chatGPT接入Excel与Word教程 需要魔法上网 不用的都是骗人的 默认你注册过openAI账号了并使用过chatGPT了 本文就不教如何注册GPT啦 网上全是教程 这里贴一条亲测可用的教程网址 一 创建你的chatGP
  • centos7安装killall命令

    centos7精简安装后 使用中发现没有killall命令 经查找 可以通过以下命令解决 yum install psmisc y 简单介绍一下 psmisc Psmisc软件包包含三个帮助管理 proc目录的程序 安装下列程序 fuser
  • 模拟ic设计和数字ic设计的区别,含薪资表

    前言 本文主讲 数字IC设计与模拟IC设计的区别 初衷在于希望对新入行或想入行的同学在方向选择时提供有效的参考 正文 IC设计是半导体集成电路产品设计的统称 又称芯片设计 按功能可分为 数字IC 模拟IC 微波IC 其他IC 本文主要介绍数
  • sql根据指定字段查找表中重复记录,并统计重复次数

    查找表中重复记录 重复记录是根据单个字段来判断 并统计重复次数 SELECT 重复字段 COUNT 0 AS num FROM 表名 GROUP BY 重复字段 HAVING COUNT 重复字段 gt 1
  • npm link 引发的 Invalid hook call 问题

    项目场景 开发React组件库 假设路径为 workspace ui 时 为了避免每次修改都发布到 npm 在本地的测试项目 假设路径为 tmp test 中使用 npm link 为组件库建立软连接 方便本地调试 问题描述 不幸的是 发生