typescript版本与@types/lodash版本不兼容问题解决思路

一、发现问题

最近由于自行开发的组件库升级到tdesign-vue-next最新的版本,遇到了打包依赖版本不兼容问题。打包时控制台报错如下:

二、定位问题

1、肯定是lodash和typescript校验问题,那么实际是@types/lodash这个依赖和typescript问题

2、由于官方的UI库调整组件依赖 lodashlodash-es从而导致组件库打包tsc命令无法通过

三、分析问题

首先、应该检查两个包@types/lodash和typescript版本的兼容性。typescript得版本可能会影响类型的定义。@types/lodash的版本可能依赖于某个特定的typescript,我们的项目typescript是~4.5.5也就是4.5.x的版本。通常@types的包更新会跟随特定typescript版本。typescript又是会有破坏性的变更,比如4.5版本引入了某些新特性,或者修改了类型推断方式,这都可能导致旧的@types包不兼容。

四、解决问题

1、确定typescript与@types/lodash确实存在兼容性问题

2、查看node_modules中@types/lodash的版本

发现要求的typescript的版本是5.0+

而我们组件库依赖的typescript版本是~4.5.5

2、升级typescript得版本显然影响范围更大,成本更高,那就去降@types/lodash版本,问题是降到什么版本合适呢?

3、查看npm包我们会发现typescript版本是4.5+的版本号

4、于是乎去安装,按理说这个类型只用于打包时使用,安装到devDependencies即可

然后想象很美好,现实很骨感,发现如此打包还是报错

5、猜想有可能是安装第三方依赖包时,会自带这个依赖包从而导致版本被覆盖

这时候我们就要回忆一下npm的依赖解析机制了。当安装一个包时,如果该包的dependencies

或者devDependencies中声明了某个依赖,npm默认会尝试安装最新的兼容版本,但具体的行为取决于版本范围

如果本地已经有一个版本,新的安装包要求的版本与本地兼容则不会改变,否则不兼容,可能会安装另一个版本,导致node_modules中出现多个版本

6、查看tdesign-vue-next的package.json是否显示的依赖了特定的版本,是否与你本地的冲突

通过命令 npm view tdesign-vue-next dependencies验证td的依赖

很明显他确实固定了版本要求,而该版本要求typescript是5.0+与我们项目4.5.x冲突

7、固定本地的版本到dependecies中,如果是项目环境只需要放到devDependecies中,但是组件库又提供给第三方应用使用

所以应该固定到dependencies中,而事实证明,放到dependencies中组件库打包才不会报错,放到devDependencies则仍然报错

相关推荐
Ticnix10 小时前
ECharts初始化、销毁、resize 适配组件封装(含完整封装代码)
前端·echarts
纯爱掌门人10 小时前
终焉轮回里,藏着 AI 与人类的答案
前端·人工智能·aigc
twl10 小时前
OpenClaw 深度技术解析
前端
崔庆才丨静觅10 小时前
比官方便宜一半以上!Grok API 申请及使用
前端
星光不问赶路人10 小时前
vue3使用jsx语法详解
前端·vue.js
天蓝色的鱼鱼10 小时前
shadcn/ui,给你一个真正可控的UI组件库
前端
布列瑟农的星空10 小时前
前端都能看懂的Rust入门教程(三)——控制流语句
前端·后端·rust
Mr Xu_10 小时前
Vue 3 中计算属性的最佳实践:提升可读性、可维护性与性能
前端·javascript
jerrywus11 小时前
我写了个 Claude Code Skill,再也不用手动切图传 COS 了
前端·agent·claude
玖月晴空11 小时前
探索关于Spec 和Skills 的一些实战运用-Kiro篇
前端·aigc·代码规范