Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
2 tasks
9mm opened this issue Jun 29, 2024 · 8 comments · May be fixed by #981
Closed
2 tasks

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

9mm opened this issue Jun 29, 2024 · 8 comments · May be fixed by #981
Labels
bug Something isn't working

Comments

@9mm
Copy link

9mm commented Jun 29, 2024

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
@9mm 9mm added the bug Something isn't working label Jun 29, 2024
@Saeid-Za
Copy link
Contributor

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
Copy link
Author

9mm commented Jun 30, 2024 •
edited
Loading

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
Copy link
Contributor

Saeid-Za commented Jun 30, 2024 •
edited
Loading

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
Copy link
Author

9mm commented Jun 30, 2024

@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
Copy link
Contributor

Saeid-Za commented Jun 30, 2024 •
edited
Loading

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
Copy link
Author

9mm commented Jun 30, 2024 •
edited
Loading

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
Copy link
Author

9mm commented Jun 30, 2024

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

@9mm
Copy link
Author

9mm commented Jul 2, 2024

new nuxt is out and error finally went away

@9mm 9mm closed this as completed Jul 2, 2024
@n1crack n1crack mentioned this issue Dec 27, 2024
Open
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
2 participants
@9mm @Saeid-Za