Yarn Workspaces+Vue3+TS+Vite单仓构建vue-tsc报错排查求助

问题现象 #

使用Yarn Workspaces已有数月，在根目录执行yarn build（该命令实际执行vue-tsc --noEmit && vite build）时，vue-tsc环节偶尔会在无关小改动后失败，推测与类型错误有关，但无法看到具体错误位置；单独执行vite build则始终正常。

报错信息如下：

/home/projects/my-project/node_modules/vue-tsc/bin/vue-tsc.js:53
                        throw err;
                        ^

Error: Debug Failure. False expression: Paths must either both be absolute or both be relative
    at getRelativePathFromDirectory (/home/projects/my-project/node_modules/typescript/lib/tsc.js:5717:9)
    at relativeToBuildInfo (/home/projects/my-project/node_modules/typescript/lib/tsc.js:117152:38)
    at convertToReusableDiagnosticRelatedInformation (/home/projects/my-project/node_modules/typescript/lib/tsc.js:117237:18)
    at /home/projects/my-project/node_modules/typescript/lib/tsc.js:117223:20
    at Array.map (<anonymous>)
    at convertToReusableDiagnostics (/home/projects/my-project/node_modules/typescript/lib/tsc.js:117222:22)
    at getBuildInfo2 (/home/projects/my-project/node_modules/typescript/lib/tsc.js:117099:11)
    at newProgram.getBuildInfo (/home/projects/my-project/node_modules/typescript/lib/tsc.js:117309:41)
    at Object.getBuildInfo (/home/projects/my-project/node_modules/typescript/lib/typescript.js:116651:70)
    at emitBuildInfo (/home/projects/my-project/node_modules/typescript/lib/typescript.js:109453:30)

项目环境 #

• 项目结构：

  • api
  • vue-shared
  • app-1
  • app-2
  • app-3

• 根目录package.json配置：

{
  "private": true,
  "workspaces": [
    "vue-shared",
    "app1",
    "app2",
    "app3"
  ],
  "version": "0.10.2"
}

• 导入方式：

  • 从子应用导入vue-shared模块：

    import { useScopedTranslations } from "vue-shared/composables/useScopedTranslations";
    

  • 从vue-shared导入当前子应用的模块（通过@别名，不同子应用加载自身对应模块）：

    import { useAuthorisationStore } from "@/modules/authorisation/store";
    

• 子应用tsconfig配置：

{
    "compilerOptions": {
        "baseUrl": ".",
        "target": "esnext",
        "useDefineForClassFields": true,
        "allowSyntheticDefaultImports": true,
        "composite": true,
        "module": "esnext",
        "moduleResolution": "node",
        "strict": true,
        "jsx": "preserve",
        "sourceMap": false,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "lib": [
            "esnext",
            "dom"
        ],
        "skipLibCheck": true,
        "types": [
            "node",
            "vuetify"
        ],
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
    "include": [
        "src/**/*.ts",
        "src/**/*.d.ts",
        "src/**/*.tsx",
        "src/**/*.vue",
        "vite.config.ts"
    ]
}

• 额外现象：成功构建后生成的tsconfig.tsbuildinfo文件存在时，有时不会触发报错；该文件不存在时，报错大概率出现。

排查过程（更新） #

全局安装vue-tsc和TypeScript后，手动在子应用目录执行vue-tsc --noEmit，成功看到具体类型错误：

src/modules/member/views/ViewProgramMemberCreate.vue:92:22 - error TS18048: '__VLS_ctx.form.member.name' is possibly 'undefined'.

92             v-model="form.member.name.firstName"
                        ~~~~~~~~~~~~~~~~

src/modules/member/views/ViewProgramMemberCreate.vue:98:22 - error TS18048: '__VLS_ctx.form.member.name' is possibly 'undefined'.

98             v-model="form.member.name.insertion"
                        ~~~~~~~~~~~~~~~~

src/modules/member/views/ViewProgramMemberCreate.vue:104:22 - error TS18048: '__VLS_ctx.form.member.name' is possibly 'undefined'.

104             v-model="form.member.name.lastName"
                         ~~~~~~~~~~~~~~~~

修复这些类型错误后，原模糊报错消失。

请求帮助 #

1. 验证当前项目配置是否存在问题
2. 提供更稳定的获取vue-tsc报错详情的方法

内容的提问来源于stack exchange，提问作者Ricardo van Laarhoven