False positive property typecheck issue in templates

[innocenzi]

Since Vue 3.2.33.1.3 (works properly with 3.2.23.1.2, not with 3.2.33.1.3 onward), I have that typecheck issue:

That show property is defined in a the modal component in <script setup lang="ts">:

defineProps({ show: Boolean })

I'm also using vite-plugin-components which generates a components.d.ts file with the following:

// generated by vite-plugin-components
// read more https://github.com/vuejs/vue-next/pull/3399

declare module 'vue' {
  export interface GlobalComponents {
    // ...
    Modal: typeof import('./src/components/Modal.vue')['default']
    // ...
  }
}

export { }

I'm running Volar 0.26.6.

Maybe related to your PR? vuejs/core@81e69b2

[johnsoncodehk]

@pikax please cc

[pikax]

@innocenzi

Can you please confirm the vue version? 3.2.3 or 3.2.2 does not exist, currently 3.2.0 is in beta

Does the type gets inferred correctly if you import the Modal inside of you setup or just when you use the GlobalComponents interface?

Can you provide a full example repo?

[innocenzi]

Sorry, 3.1.x, not 3.2.x. I just updated to beta 3.2 hence my mistake when writing down the version.

I have a repository here: https://github.com/innocenzi/avatar - it's not a minimal reproduction but the issue is visible in:

• src\components\pages\ImageForm.vue (show property)
• src\components\Stencil.vue (style property)

Does the type gets inferred correctly if you import the Modal inside of you setup or just when you use the GlobalComponents interface?

In either case, the type is not inferred correctly. I tried importing the modal component directly and removing components.d.ts, the same issue occurs: https://i.imgur.com/04N3QhC.png

[pikax]

Sorry, 3.1.x, not 3.2.x. I just updated to beta 3.2 hence my mistake when writing down the version.
(...)
In either case, the type is not inferred correctly. I tried importing the modal component directly and removing components.d.ts, the same issue occurs: https://i.imgur.com/04N3QhC.png

Pulled your main and ran pnpm install and the ImageForm.vue file <modal is not recognised, so I imported it on the line 99

import Modal from '../Modal.vue'

That seems to be working just fine, using Volar 0.26.6

[johnsoncodehk]

@innocenzi can't reproduce too. Can you try delete node_modules and reinstall again?

[innocenzi]

Indeed, I just wiped everything and cloned the repository. Installed dependencies with pnpm and ran the development server to generate components.d.ts and it apparently works.

Quite unsure why honestly, I don't think I changed anything beside upgrading deps. Sorry for the issue and thanks for your help!

[pikax]

My guess it was caused by the upgrade, most likely you had multiple versions of @vue/reactivity in your node_modules , because Ref type has unique symbol on the type to make sure there's no false Refs, but that causes problems in terms of imports because that symbol is only valid for that type definition on that file path, meaning for some reason there's another version imported of @vue/reactivity it would cause the bug you were experiencing.

[abdulhadi-lababidi]

I'm having the same issue with my project 😞
I'm using nuxt 2 with vue version 2.6.14 and @vue/composition-api

can anyone help me to resolve this issue please ( I tried the solution mentioned above and it's not working)

[johnsoncodehk]

@abdulhadi-lababidi please provide minimal reproduction at least, otherwise there is nothing we can do.