svelteuidev / svelteui

SvelteUI Monorepo
https://svelteui.dev
MIT License
1.27k stars 63 forks source link

IDE reports typescript error on Menu.item icon prop for radix-icons-svelte #411

Closed swip3798 closed 11 months ago

swip3798 commented 1 year ago

What package has an issue

@svelteuidev/core

A clear and concise description of what the bug is

When I create a new sveltekit project and use the first example from the Menu documentation page, I get a typescript type error for the icon prop when using the radix-icons-svelte icons, like in the documentation.

It shows this error in VS Code:

Type 'typeof ChatBubble' is not assignable to type 'typeof SvelteComponent | HTMLOrSVGElement | undefined'.
  Types of construct signatures are incompatible.
    Type 'new (options: ComponentConstructorOptions<{ [x: string]: any; color?: string | undefined; size?: number | undefined; }>) => ChatBubble' is not assignable to type 'new <Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any>(options: ComponentConstructorOptions<Props>) => SvelteComponent<...>'.
      Construct signature return types 'ChatBubble' and 'SvelteComponent<Props, Events, Slots>' are incompatible.
        The types of '$$prop_def' are incompatible between these types.
          Type '{ [x: string]: any; color?: string | undefined; size?: number | undefined; }' is not assignable to type 'Props'.
            '{ [x: string]: any; color?: string | undefined; size?: number | undefined; }' is assignable to the constraint of type 'Props', but 'Props' could be instantiated with a different subtype of constraint 'Record<string, any>'.ts(2322)

Maybe this is an typescript problem and unrelated to svelteui, if that's the case I'm sorry. I haven't made any changes to the typescript, I'm using the default settings from the sveltekit skeleton template.

In which browser(s) did the problem occur?

No response

Steps To Reproduce

  1. Create a new sveltekit project using this command: npm create svelte@latest my-app
  2. Add svelteui core
  3. Add radix-icons-svelte
  4. Paste the first example of the Menu documentation page in a component
  5. icon prop gets marked as an error

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

No

Relevant Assets

No response