发布于 3 周前 ,更新于 2 周前 vite

记一次 vue-tsc 引起的错误

今天项目进行生产构建时突然就报错了,报错的地方是我引入的第三方库 ant-design-vuebytemd ,错误大概如下:

node_modules/ant-design-vue/lib/vc-select/Select.d.ts:175:21 - error TS2304: Cannot find name 'EventHandlerNonNull'.
onPopupScroll?: EventHandlerNonNull;

node_modules/bytemd/lib/index.d.ts:1:20 - error TS2307: Cannot find module './editor.svelte' or its corresponding type declarations.
import Editor from './editor.svelte';
寻找报错原因
typescript 版本

根据错误提示大概知道是 ts 类型问题,所以一开始以为是 typescript 的版本问题,将 typescript 降了几个版本错误仍然存在。所以可以确定不是 typescript 版本问题。

typescript 配置

在排除了 ts 的版本问题后,下一个想到的就是 ts 的配置问题,查找代码提交记录并没有对 ts 的配置做过更改。所以也不是 ts 的配置问题。

第三方库 ant-design-vue 和 bytemd

排除了上面两个问题后,就有点束手无策了,一度认为是 ant-design-vue 和 bytemd 的问题。但在这两个库的官方 GitHub 上并未找到有相应的 issue ,所以应该是没有人遇到这种问题,所以应该不是第三方库的问题。

vue-tsc

真的找不到原因吗?执行了N遍 npm run build ,有一个细节一直被我忽略:为什么每次执行该命令脚本感觉就会卡在那里,需要等上几秒后才开始构建代码(这里是将前面报错的代码引入给注释了,所以才能正常构建),难道 vite 这么慢?

于是打开 package.json 文件查看 scripts.build 字段,原来里面执行了两条命令 vue-tsc --noEmit && vite build ,嗯?这个 vue-tsc 是干嘛的,查找了一下原来是对 vue 3 的一个类型检测工具,然后我尝试单独执行 vue-tsc --noEmit ,上面的报错出现了,原来是 vue-tsc 引起的错误。

真正的原因

猛然想起,之前 vscode 的 volar 插件有提醒我说项目中的 vue-tsc 版本与 volar 的不一致,然后我就把依赖中的 vue-tsc 从 0.2.2 升级到了 0.3.0 ,所以现在可以肯定的是 vue-tsc 的版本问题。

于是我在 vue-tsc 的 GitHub 中看到了这样一条 issue :How does vue-tsc skip node_modules? ,是的,我的报错也是来自于 node_modules 中,如果在执行 vue-tsc 时能忽略 node_moudles 问题就可以解决了。

最后在该 issue 中找到了解决方法,作者说加上 --skipLibCheck 参数即可:

{
  "script": {
    "build": "vue-tsc --noEmit --skipLibCheck && vite build"
  }
}

EventHandlerNonNull 从 typescript 4.4 版本后没有该类型,可能是因为 vue-tsc 使用了最新版的 typescript 导致的。

https://github.com/microsoft/TypeScript/blob/v4.4.2/lib/lib.dom.d.ts 里面是找不到 EventHandlerNonNull 类型的。

初识 vue-tsc

需要知道 vue-tsc 有哪些参数,可执行下面命令查看:

$ ./node_modules/.bin/vue-tsc --help

这些参数其实与 tsc --help 基本上是一样的

© 2016 - 2021 BY 禾惠 粤ICP备20027042号