[Vue3/Vite/Quasar] Type errors when transpiling with vue-tsc

[jost-s]

Actual

When trying to build my Vue/Vite/Quasar project, I get type errors from vue-tsc in a Vite module, my own component and Quasar modules.

VScode's Typescript check as well as running the Vite dev server haven't produced any such errors.

Expected

Transpiling completes without errors.

Output

npm run build

> vue-tsc --noEmit && vite build

src/components/MewListItem.vue:197:37 - error TS2339: Property 'mewMew' does not exist on type 'MewType'.
  Property 'mewMew' does not exist on type '{ original: null; }'.

197         ? props.feedMew.mew.mewType.mewMew
                                        ~~~~~~

...

../node_modules/quasar/dist/types/index.d.ts:6250:4 - error TS1023: An index signature parameter type must be either 'string' or 'number'.

6250   [key: `label-${string}`]: (scope: {
        ~~~

...

../node_modules/vite/types/importMeta.d.ts:39:3 - error TS2411: Property 'VITE_HC_PORT' of type 'number' is not assignable to string index type 'string | boolean | undefined'.

39   [key: string]: string | boolean | undefined

System info

• Volar: v0.37.3
• Typescript: v4.6.3
• @vitejs/plugin-vue: v2.3.1
• vite: 2.9.1
• vue: 3.2.33
• vue-tsc: v0.29.8

[jost-s]

I'm struggling to create a reproduction for this.

When I upgraded vue-tsc to v0.32.x I got an error that @babel/types was missing. Installing that dependency resolved all errors except the vite/types/importMeta.d.ts error.

When I create a repo with only that part, vue-tsc transpiles fine. 😕

What makes it harder is that the vue-tsc versions are ambiguous.
In the project with the problem, for

{
  "name": "vue-tsc",
  "version": "0.29.8",

I get

$ npx vue-tsc --version
Version 4.7.3

For the repro project with also

{
  "name": "vue-tsc",
  "version": "0.29.8",

I get

$ npx vue-tsc --version
Version 4.6.3

[johnsoncodehk]

vue-tsc --version mean the version of node_modules/typescript, because vue-tsc is a proxy of node_modules/typescript/lib/tsc.js.

Try update the vue-tsc version to latest, because 0.29.8 is outdate, if it can't fix the problem please provide a repro case so I can check.

[jost-s]

I think I'm getting to the root of this. It seems like it's related to the Typescript version. I have a multi workspace project, and the installed version of Typescript was 4.3.5.

I've uninstalled Typescript and updated all packages that depend on Typescript to the latest version. Then reinstalled vue-tsc@latest.

I'm on Typescript 4.7.3:

$ npm ls typescript
clutter-dev@0.4.0 /Users/jost/Desktop/holochain/clutter
└─┬ clutter-ui-vue@0.0.1 -> ./ui
  └─┬ vue-tsc@0.37.8
    └── typescript@4.7.3

Now there are no type errors, but other errors:

 $ npx vue-tsc --noEmit
error TS6504: File '/Users/jost/Desktop/holochain/clutter/ui/src/components/MewListItemSkeleton.vue.__VLS_template.jsx' is a JavaScript file. Did you mean to enable the 'allowJs' option?
  The file is in the program because:
    Root file specified for compilation

error TS6504: File '/Users/jost/Desktop/holochain/clutter/ui/src/components/MewListItemSkeleton.vue.js' is a JavaScript file. Did you mean to enable the 'allowJs' option?
  The file is in the program because:
    Root file specified for compilation

error TS6504: File '/Users/jost/Desktop/holochain/clutter/ui/src/components/MewListSkeleton.vue.__VLS_template.jsx' is a JavaScript file. Did you mean to enable the 'allowJs' option?
  The file is in the program because:
    Root file specified for compilation

error TS6504: File '/Users/jost/Desktop/holochain/clutter/ui/src/components/MewListSkeleton.vue.js' is a JavaScript file. Did you mean to enable the 'allowJs' option?
  The file is in the program because:
    Root file specified for compilation

error TS6504: File '/Users/jost/Desktop/holochain/clutter/ui/src/pages/HomePage.vue.__VLS_template.jsx' is a JavaScript file. Did you mean to enable the 'allowJs' option?
  The file is in the program because:
    Root file specified for compilation

error TS6504: File '/Users/jost/Desktop/holochain/clutter/ui/src/pages/HomePage.vue.js' is a JavaScript file. Did you mean to enable the 'allowJs' option?
  The file is in the program because:
    Root file specified for compilation

error TS6504: File '/Users/jost/Desktop/holochain/clutter/ui/src/pages/MyProfile.vue.__VLS_template.jsx' is a JavaScript file. Did you mean to enable the 'allowJs' option?
  The file is in the program because:
    Root file specified for compilation

error TS6504: File '/Users/jost/Desktop/holochain/clutter/ui/src/pages/MyProfile.vue.js' is a JavaScript file. Did you mean to enable the 'allowJs' option?
  The file is in the program because:
    Root file specified for compilation

Do they tell you something, @johnsoncodehk?

[johnsoncodehk]

This is a regression of v0.37.8, please track #1452.

[jost-s]

related to #1452

added <script> tag as a workaround