[Bug]: Property 'heading' does not exist on type

[9mm]

Reproduction

This is just after running npx shadcn-vue@latest add range-calendar with typescript. Its as simple as it gets, so hopefully no reproduction is needed

Describe the bug

After adding the range component, I immediately get the following typescript errors for RangeCalendarHeading:

ℹ hmr update /components/ui/range-calendar/RangeCalendarHeading.vue, /assets/css/tailwind.css                                                                                    3:33:38 PM

 ERROR                                                                                                                                                                            3:33:41 PM
 ERROR(vue-tsc)  Property 'heading' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<{ readonly class?: any; readonly asChild?: boolean | undefined; readonly as?: AsTag | Component | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<...>, never>; ... 10 more ...; $watch<T extends string | ((...arg...'.
 FILE  /Users/zesty/Code/xxx-admin/components/ui/range-calendar/RangeCalendarHeading.vue:23:12

    21 |     v-bind="forwardedProps"
    22 |   >
  > 23 |     <slot :heading-value>
       |            ^^^^^^^
    24 |       {{ headingValue }}
    25 |     </slot>
    26 |   </RangeCalendarHeading>

 ERROR(vue-tsc)  Property 'value' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<{ readonly class?: any; readonly asChild?: boolean | undefined; readonly as?: AsTag | Component | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<...>, never>; ... 10 more ...; $watch<T extends string | ((...arg...'. Did you mean 'toValue'?
 FILE  /Users/zesty/Code/xxx-admin/components/ui/range-calendar/RangeCalendarHeading.vue:23:20

    21 |     v-bind="forwardedProps"
    22 |   >
  > 23 |     <slot :heading-value>
       |                    ^^^^^
    24 |       {{ headingValue }}
    25 |     </slot>
    26 |   </RangeCalendarHeading>

[vue-tsc] Found 2 errors. Watching for file changes.

System Info

System:
    OS: macOS 14.5
    CPU: (12) arm64 Apple M2 Max
    Memory: 6.12 GB / 96.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.15.0 - /opt/homebrew/opt/node@20/bin/node
    npm: 10.7.0 - /opt/homebrew/opt/node@20/bin/npm
    pnpm: 9.4.0 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 126.0.6478.127
    Safari: 17.5
  npmPackages:
    @vueuse/core: ^10.11.0 => 10.11.0
    nuxt: ^3.12.2 => 3.12.2
    radix-vue: ^1.8.5 => 1.8.5
    shadcn-nuxt: ^0.10.4 => 0.10.4
    vue: ^3.4.31 => 3.4.31

Contributes

• [ ] I am willing to submit a PR to fix this issue
• [ ] I am willing to submit a PR with failing tests

[Saeid-Za]

Hello There! I'm afraid I can't reproduce this issue on a new vue 3 + vite project. This seems to be a problem related to parsing of the vue file and might be related to vue-tsc itself, could you create a reproduction please? Thanks !

[9mm]

I cant add a reproduction link so if you have to close this i understand.

im using vue-tsc 1.8.27 because nuxt 3 can't support vue-tsc 2 yet

[Saeid-Za]

I think you're referring to this issue if I'm not mistaken, which is fixed by now. could you update you're dependencies (using ncu) and confirm the fix? I don't have any issue with vue-tsc 2.x and nuxt 3.x.

Update

If you're using

typescript: {
   typeCheck:  true
}

In your nuxt.config.ts, nuxt crashes with this error.

Cannot restart nuxt:  Cannot find module 'vue-tsc/out/index'

It seems that issue is not resolved yet.

[9mm]

@Saeid-Za hmm.. how do you have it specified in package.json?

This still results in the index error you linked to: "vue-tsc": "^2.0.24"

[Saeid-Za]

You are correct. With typeCheck set to true, errors persist regardless of the vue-tsc version, both in the UI or in the terminal. This issue should be reported to the vue-tsc repo as unfortunately, there is nothing we can do on our end to resolve it. In the meantime, I suggest disabling typeCheck and using the command npx nuxi typecheck whenever type checking is needed.

[9mm]

So ive installed vue-tsc from master, and the 'index' bug is gone, and im fully on 2.0 with latest TS:

    "tsc#master": "link:vuejs/language-tools/tree/master/packages/tsc#master",
    "typescript": "5.4.5"

I can report upstream, but before I do that I just wanted to make sure that it's not some kind of syntax error. I've never seen a slot that just has a floating :some-thing before. I also noticed it's not used on any other components.

I'm asking because if you look at the error, it looks like it's improperly parsing it, as if its invalid vue code. it thinks they're different properties separated by a hyphen:

 Property 'heading' does not exist on type
  > 23 |     <slot :heading-value>
       |            ^^^^^^^
Property 'value' does not exist on type
  > 23 |     <slot :heading-value>
       |                    ^^^^^

Notice it says "heading" and "value" separately

[9mm]

actually.... it might be loading vue-tsc from some other plugin. so ignore me for the time being

[9mm]

new nuxt is out and error finally went away