Netlify上Vue3+Vuetify项目生产构建因TS错误失败，求解决方案

问题场景 #

技术栈为Vue3 + Vuetify的项目，执行npm run build生产构建时，因TypeScript类型检查错误导致构建失败，核心报错日志如下：

12:41:48 AM: $ npm run build
12:41:48 AM: > skinulate@8.1.3 build
12:41:48 AM: > vue-cli-service build
12:41:48 AM: All browser targets in the browserslist configuration have supported ES module.
12:41:48 AM: Therefore we don't build two separate bundles for differential loading.
12:41:48 AM: -  Building for production...
12:42:57 AM:  ERROR  Failed to compile with 6 errors7:12:57 PM
12:42:57 AM:  error  in node_modules/vee-validate/node_modules/type-fest/source/camel-case.d.ts:25:32
12:42:57 AM: TS1005: '?' expected.
12:42:57 AM:     23 |   OutputString extends string = '',
12:42:57 AM:     24 | > = Words extends [
12:42:57 AM:   > 25 |   infer FirstWord extends string,
12:42:57 AM:        |                                 ^
12:42:57 AM:     26 |   ...infer RemainingWords extends string[],
12:42:57 AM:     27 | ]
12:42:57 AM:     28 |   ? Options['preserveConsecutiveUppercase'] extends true
12:42:57 AM:  error  in node_modules/vee-validate/node_modules/type-fest/source/camel-case.d.ts:26:42
12:42:57 AM: TS1005: '?' expected.
12:42:57 AM:     24 | > = Words extends [
12:42:57 AM:     25 |   infer FirstWord extends string,
12:42:57 AM:   > 26 |   ...infer RemainingWords extends string[],
12:42:57 AM:        |                                           ^
12:42:57 AM:     27 | ]
12:42:57 AM:     28 |   ? Options['preserveConsecutiveUppercase'] extends true
12:42:57 AM:     29 |       ? `${Capitalize<FirstWord>}${CamelCaseFromArray<RemainingWords, Options>}`
12:42:57 AM:  error  in node_modules/vee-validate/node_modules/type-fest/source/join.d.ts:59:36
12:42:57 AM: TS1005: '?' expected.

报错原因 #

这些错误来自vee-validate依赖的type-fest包，该包使用了TypeScript 4.8及以上版本才支持的infer extends语法，而当前项目使用的TypeScript版本低于4.8，导致类型检查无法识别该语法，最终触发构建失败。

解决方法 #

方案1：升级TypeScript版本到兼容版本 #

执行命令升级项目的TypeScript到4.8或更高版本：

npm install typescript@^4.8.0 --save-dev

升级完成后重新执行npm run build即可。

方案2：跳过第三方库的类型检查 #

在项目根目录的tsconfig.json中，修改compilerOptions，添加skipLibCheck配置：

{
  "compilerOptions": {
    // 其他配置...
    "skipLibCheck": true
  }
}

该配置会忽略所有第三方库的类型检查错误，适合不想升级TypeScript版本的场景。

方案3：锁定type-fest的兼容版本 #

如果不想升级TypeScript，可在package.json中添加resolutions字段（npm 7+或yarn支持），指定type-fest为兼容旧TS版本的版本：

{
  // 其他配置...
  "resolutions": {
    "type-fest": "^3.0.0"
  }
}

添加后执行npm install重新安装依赖，再执行构建命令即可。

内容的提问来源于stack exchange，提问作者06011991