Vue 3.3 breaks auto import types in vueTemplate

[0x00A1FA]

Hello,

I recently upgraded my project to Vue 3.3. I saw on the blog post (https://blog.vuejs.org/posts/vue-3-3) that there have been some changes to the JSX namespace (https://blog.vuejs.org/posts/vue-3-3#jsx-import-source-support).

I'm not getting types for global imports inside <template>s. I have vueTemplate: true, inside the Vite config, but I'm getting errors when using variables from auto-imports.d.ts. They work fine inside <script setup>s.

My stack is Vue 3.3.1 + Vite (latest).

Here's an example:

Looking forward to a timely solution.

Thanks!

[joker77877]

me too!!

[antfu]

I would love to see a minimal reproduction if someone could make one. Not sure if it's some regression related to Volar, as we are extending the ComponentCustomProperties interface.

/cc @johnsoncodehk if you have any clue

[antfu]

@dflock your issue is unrelated to the original post, please create another issue instead. Thanks. I am hiding your comments here.

[k983551019]

I would love to see a minimal reproduction if someone could make one. Not sure if it's some regression related to Volar, as we are extending the ComponentCustomProperties interface.

/cc @johnsoncodehk if you have any clue

vuejs/language-tools#3190 (comment)

[tobychidi]

This issue would soon become another "me too" movement. with the comments everywhere 🥲

Nuxt says report to Volar. Volar says report to unplugin-auto-imports and you say report to Volar.

Here is the original issue on nuxt nuxt/nuxt#20827

[xiaoxiangmoe]

Hi all, can you provide us a minimal reproduction to find some clue and then fix it?

[tobychidi]

Reproduction

This error doesn't seem to be reproducible on Stackblitz so I have included a github repo

Describe the bug

When functions are auto-imported from utils/ composables and used in Vue SFC Template, VsCode throws and error. Yes, I use the latest volar. This error appeared after pnpm up That bumped my Vue version to 3.3.1.

I have not tried reverting Vue versions though.

Additional context

Example:

Property 'useShowSnack' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: { key?: string | number | symbol | undefined; ref?: VNodeRef | undefined; ref_for?: boolean | undefined; ... 8 more ...; style?: unknown; }; ... 10 more ...; $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (arg...'.ts(2339)

[xiaoxiangmoe]

@tobychidi Hi, I try your repo in both Vue Language Features (Volar) v1.2.0 and v1.7.6. All works well for me.

---

Also I tried to run

pnpm add --save-dev vue-tsc typescript @types/node && pnpm build && ./node_modules/.bin/vue-tsc --noEmit

in your repo.

And all works well.

---

Is there anything I miss? Is there any body can reproduce it will vue-tsc cli?

[joker77877]

auto-import.d.ts still reports an error