Property 'slot' does not exist on type 'Pick<IntrinsicElements, "div">'

[Jungzl]

Description

Assume you have two components, CompA and CompB

<!-- CompA -->
<script lang="ts" setup>
  import { ref } from 'vue'
  const foo = ref('bar')
  defineSlots<{
    default: {
      foo: string,
      buz: number
    }
  }>()
</script>

<template>
  <div>
    <slot v-bind="{ foo }" />
    <!-- ^^^ Property 'slot' does not exist on type 'Pick<IntrinsicElements, "div">'. -->
  </div>
</template>

<!-- CompB -->
<script lang="ts" setup>
  import CompA from './CompA.vue'; // using `unplugin-vue-components` and comment this line will throw error below
</script>

<template>
  <CompA>
    <!-- ^^^ Property 'CompA' does not exist on type 'Pick<IntrinsicElements, "template"> & Pick<IntrinsicElements, "div">'. -->
    <template #default="{ foo, buz }">
      <div>
        {{ foo }}{{ buz }}
      </div>
    </template>
  </CompA>
</template>

Reproduction

Github
Stackblitz

1. run pnpm run check:type throw 1 error.
2. comment import line in CompB & rerun pnpm run check:type throw 3 errors.

> vue-tsc

src/components/CompB.vue:10:4 - error TS2339: Property 'CompA' does not exist on type 'Pick<IntrinsicElements, "template"> & Pick<IntrinsicElements, "div">'.

10   <CompA>
      ~~~~~

src/components/CompA.vue:21:6 - error TS2339: Property 'slot' does not exist on type 'Pick<IntrinsicElements, "div">'.

21     <slot v-bind="{ foo }" />
        ~~~~

src/components/CompB.vue:17:5 - error TS2339: Property 'CompA' does not exist on type 'Pick<IntrinsicElements, "template"> & Pick<IntrinsicElements, "div">'.

17   </CompA>
       ~~~~~


Found 3 errors in 2 files.

Errors  Files
     2  src/components/CompB.vue:10
     1  src/components/CompA.vue:21

Environment Info

OS: Windows 10
Extensions: Volar v1.6.0
Vue version: v3.3.0-beta.2

[johnsoncodehk]

I can only reproduce this error in the Stackblitz repro, is it expected?

[Jungzl]

I can only reproduce this error in the Stackblitz repro, is it expected?

uh, seems there is a little bit of differences between stackblitz and my local env, my local env can indeed reproduce 3 errors. But, yes, it is (for stackblitz). And If I turn off vueCompilerOptions.strictTemplates, no errors.

[mtorromeo]

I get the same error but did not find out yet what causes it, but it doesn't seem to happen in every component with a slot.

[Jungzl]

Thank you @johnsoncodehk , the slot error is solved, but there's still auto-import errors in my local env, I can only use explicit import to avoid errors.