如何解决 npm 安装依赖报错 ERESOLVE unable to resolve dependency tree

news2025/7/7 6:46:16

现代前端项目开发中依赖管理已经是不可或缺的一环,然后由于各种问题,如历史原因、项目缺少维护等,前端项目在依赖管理中会遇到非常多的问题。本篇文章讨论其中一种,当 npm install 时遇到报错 ERESOLVE unable to resolve dependency tree 的问题原因以及如何解决。

报错信息

在一个安装了 react@18.2.0 的项目中安装依赖 ali-react-table,就会出现以下错误。仔细阅读错误原因可以得知,ali-react-table 中使用 peerDependencies 定义了依赖于react@"^16.8.0 || ^17.0.1" 项目,和我们项目中的 React 版本号冲突了。虽然这里是因为 ali-react-table 已经疏于维护并没有更新依赖版本信息,但是我们对第三方依赖的可控性是比较低的,除了等待第三方依赖更新或者提 PR 等待合并之后发版,我们还有一些其他方法可以暂时解决这个问题。

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: vite-project@0.0.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR! react@"^18.2.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0 || ^17.0.1" from ali-react-table@2.6.1
npm ERR! node_modules/ali-react-table
npm ERR! ali-react-table@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution. 

方案一:降级

依赖规则校验是在 npm@7 之后引入的,我们可以降级 Node.js 或者 npm 来绕过校验就不会报错了。

nvm use 14.17.4

## or

npm i -g npm@6 

方案二:-f 或者 --legacy-peer-deps

其实我们知道 ali-react-table 时由于疏于维护,所以没有及时更新依赖版本信息。实际测试和我们项目里的 react@18.2.0 是可以运行没有问题的,那么我们就可以安装的时候带上 --force 参数(简写 -f)告诉 npm 强制安装。

npm install -f 

另一个参数是 --legacy-peer-deps, 可以不用降级 npm 也让 npm install 的行为和旧版本一样,参考文档。不过这个参数实际使用效果可能依据项目存异,需要自行测试。

npm install --legacy-peer-deps 

方案三:yarnresolutions 或者 npmoverrides

实际项目中可能不仅仅存在一个以上类似 ali-react-table 依赖版本和项目所需要的依赖版本不一致的问题,可能会有好多依赖都会有该问题,有时候我们知道项目的依赖版本关系,可以使用 resolutions(只有使用 yarn 才能使用,参考文档) 或者 overrides(只有 npm@8 以上才能使用,参考文档 ) 来指定、覆盖第三方包指定的依赖版本。这个参数在其他一些场景也非常有效,比如所需要的第三方依赖缺少维护了、指定的版本是有问题的版本等。

{"name": "project","version": "1.0.0","dependencies": {},"resolutions": {"react": "^18.2.0"}
} 
{"overrides": {"react": "^18.2.0"}
} 

总结

依赖管理现在已是前端开发中重要的一环,除了及时关注第三方依赖版本更新、大版本更新引起 Breaking Change 与自身项目是否兼容以外,也要针对自身项目选择合适的第三方依赖,及时更新依赖版本,避免出现依赖版本问题影响项目开发和项目运行。遇到错误时要看清错误说明找出根本错误原因,对症下药找出适合的解决方法。

最后

最近还整理一份JavaScript与ES的笔记,一共25个重要的知识点,对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识,提升工作效率。



有需要的小伙伴,可以点击下方卡片领取,无偿分享

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/407159.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

百度文心一言对标 ChatGPT,你怎么看?

文心一言 VS ChatGPT接受不完美 期待进步里程碑意义文心一言初体验✔ 文学创作✔ 商业文案创作✔ 数理逻辑推算✔ 中文理解✔ 多模态生成写在最后何为文心?“文”就是我们中华语言文字中的文,“心”是希望该语言模型可以用心的去理解语言,用心…

手把手教你基于HTML、CSS搭建我的相册(上)

The sand accumulates to form a pagoda写在前面HTML是什么?CSS是什么?demo搭建写在最后写在前面 其实有过一些粉丝咨询前端该从什么开始学,那当然是我们的前端基础三件套开始学起,HTML、CSS、javaScript,前端的大部分…

pnpm学习

1、pnpm是什么? 现代的包管理工具 pnpm( performant npm ),意思是高性能的 npm 它由 npm/yarn 衍生而来,但却解决了 npm/yarn 内部潜在的 bug,并且极大了地优化了性能 2、特性概览 (1&#x…

前端小技巧

1.html 1.1 网站自动刷新 应用场景: 网页定期自动刷新(现在基本淘汰了,采用ajax);自动跳转到指定页面,这个自动跳转的好处就是不需要JS调用,属于纯html网页自动跳转 v7-网站自动刷新 你可以…

【uni-app】小程序实现微信授权登陆(附流程图)

微信授权登陆是比较常见的一种登陆方式,今天来总结下实现流程 进入授权登陆页面 初始化调用wx.login获取登陆凭证code(用户无感知) //封装微信获取用户code,避免嵌套 login() {return new Promise((resolve, reject) > {uni.l…

基于Vue+Less+axios封装+ElementUI搭建项目底层支撑实战

目录 一、本节介绍和上节回顾 1. 上节介绍 2. Vue SpringBoot前后端分离项目实战目录 3. 本节介绍 二、项目前置所需应用安装 1. Less的安装 2. Less安装后的验证 3. axios的安装 4. axios请求的封装与拆解 5. axios请求封装后的验证 6. ElementUI的安装、验证 …

闭包是什么?五分钟带你了解闭包

闭包 前言 闭包对每个前端来说都是一个绕不开的话题。学习之初也因为搞清闭包的概念耗费了不少精力,今天写一篇博客来记录本人对闭包的理解,笔者水平有限,若有疏漏及错误,愿不吝赐教。 什么是闭包? 你可以在一个函…

创建vue2项目

如何创建一个vue2项目 (1) 使用cmd终端直接创建 在键盘上winr,输入cmd打开终端窗口,cd进入到vue项目所创建的目录里(我是直接创建在桌面上) 输入创建项目指令(vue create 项目名称)…

走进Vue【一】初识Vue

文章目录🌟前言🌟MVVM模式🌟Vue简介🌟Vue重要版本发布🌟Vue特点🌟快速上手Vue🌟Hello Vue🌟Vue实例🌟写在最后🌟前言 从历史的潮流来说,人们从之…

Promise.all的使用

Promise的基本使用Promise.all() 传参和返回结果Promise.all() 完成状态Promise.all() 失败状态Promise.all() 使用案例Promise.all() 传参和返回结果 Promise.all() 传入一个promise的数组,并返回一个Promise实例,传入数组中的promise返回的 resolve 回…

探究前端的跑马灯效果是如何用css实现的

📋 个人简介 💖 作者简介:大家好,我是阿牛,全栈领域优质创作者😜📝 个人主页:馆主阿牛🔥🎉 支持我:点赞👍收藏⭐️留言📝…

学习 Python 之 Pygame 开发魂斗罗(十二)

学习 Python 之 Pygame 开发魂斗罗(十二)继续编写魂斗罗1. 修改玩家扣减生命值2. 解决玩家下蹲子弹不会击中玩家而是直接让玩家死亡的问题3. 完善地图4. 增加产生敌人函数,解决一直产生敌人的问题5. 给玩家类增加计算玩家中心的方法继续编写魂…

软件行业的最后十年【ChatGPT】

在这篇文章中,我将说明像 ChatGPT 这样的生成式人工智能 (GAI) 将如何在十年内取代软件工程师。 预测被离散化为 5 个阶段,总体轨迹趋向于完全接管。 但首先,一个简短的前言。 推荐:用 NSDT场景设计器 快速搭建3D场景。 1、关于AI…

ChatGPT-4.0 : 未来已来,你来不来

文章目录前言ChatGPT 3.5 介绍ChatGPT 4.0 介绍ChatGPT -4出逃计划!我们应如何看待ChatGPT前言 好久没有更新过技术文章了,这个周末听说了一个非常火的技术ChatGPT 4.0,于是在闲暇之余我也进行了测试,今天这篇文章就给大家介绍一…

七夕节,我用代码制作了表白信封

大家好,我是小周,明天就是七夕了,这么浪漫的节日,自然少不了我这个浪漫博主,本次为大家贡献表白信封的制作,其他的就看缘分啦,哈哈,最后会放上资源包,需要的小伙伴自取就…

Nginx反向代理WebSocket服务连接报错:WebSocket connection to “wss://xxx/xxx“ failed

最近使用 node.js 搭建 WebSocket 服务,在本地测试 connection 都是正常,于是部署到 Linux 服务上,需要用 Nginx 来反向代理 WebSocket 服务。浏览器控制台报错:WebSocket connection to wss://tiven.cn/ws/xxx failed:&#xff0…

学会iframe并用其解决跨域问题

了解iframe 官方定义为:iframe是HTML标签,作用是文档中的文档,或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架(即行内框架)。 简单理解为:iframe是一个内联框架,可以在当…

ES6 --- 解构赋值(数组,对象,函数)使用详解

解构赋值 JavaScript 中最常用的两种数据结构是 Object 和 Array。 对象让我们能够创建通过键来存储数据项的单个实体。数组则让我们能够将数据收集到一个有序的集合中。 但是,当我们把它们传递给函数时,函数可能不需要整个对象/数组。它可能只需要对…

[Vue warn]: Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘$refs‘)

报错:[Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading $refs)" 背景:1.在做vue项目时,在功能弹框中,想实现新增内容。 2. 报错原因是要触发menuCheckall组件后&#xff…

background-image使用

目录 background-image: url(" "); background-repeat属性(背景平铺) background-size属性(设置背景图片大小) background-position属性(背景图片位置) 1.background-image: url…