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.

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

[Bug]: ListboxRoot a type error when included in defineComponent components list #1403

Open
rajalala opened this issue Oct 30, 2024 · 0 comments
Labels
bug Something isn't working

Comments

@rajalala
Copy link

rajalala commented Oct 30, 2024

Environment

Developement/Production OS: Docker container on Linux ce15d0cf873b 6.10.4-linuxkit
Node version: 20.10.0 (local), 18.20.3 (reproduction)
Package manager: [email protected] (local), [email protected] (reproduction)
Radix Vue version: 1.9.8
Vue version: 3.0.0
Client OS: MacOS Sequoia 15.0.1
Browser: Chrome 130.0.6723.70, Firefox 132.0

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-zdiydb?file=src%2Fcomponents%2FListBoxTypeError.vue

Steps to reproduce

  1. Open the reproduction link and wait for the StackBlitz project to initialize
  2. Open an additional terminal and run npm run type-check
  3. TypeScript error will originate from component ListboxTypeError.vue where ListboxRoot is included in defineComponent's components list

Describe the bug

When a component that uses ListboxRoot is authored via defineComponent (and thus ListboxRoot is included in components) this will trigger a type error coming from ListboxRoot. The component works as expected, there's just that type error (that causes e.g. pipeline failures). Seems to be very similar to an earlier issue #885 with AccordionRoot.

Using a script setup authoring (ListboxNoError in reproduction example) the type error doesn't occur and everything works as expected.

The error seems to point to mismatch between Readonly<InternalSlots> and ListboxRoot's actual types (?).

No overload matches this call.
  The last overload gave the following error.
    Type '<T extends AcceptableValue = AcceptableValue>(__VLS_props: { "onUpdate:modelValue"?: ((value: AcceptableValue) => any) | undefined; onEntryFocus?: ((event: CustomEvent<...>) => any) | undefined; ... 13 more ...; as?: Component<...> | ... 1 more ... | undefined; } & VNodeProps & AllowedComponentProps & ComponentCusto...' is not assignable to type 'Component<any, any, any, ComputedOptions, MethodOptions, {}, any>'.
      Type '<T extends AcceptableValue = AcceptableValue>(__VLS_props: { "onUpdate:modelValue"?: ((value: AcceptableValue) => any) | undefined; onEntryFocus?: ((event: CustomEvent<...>) => any) | undefined; ... 13 more ...; as?: Component<...> | ... 1 more ... | undefined; } & VNodeProps & AllowedComponentProps & ComponentCusto...' is not assignable to type 'FunctionalComponent<any, {}, any, {}>'.
        Types of parameters '__VLS_ctx' and 'ctx' are incompatible.
          Type 'Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: (exposed?: Record<string, any> | undefined) => void; }, "expose">' is not assignable to type '{ slots: Readonly<{ default: (props: { modelValue: AcceptableValue | AcceptableValue[] | undefined; }) => any; }> & { default: (props: { modelValue: AcceptableValue | ... 1 more ... | undefined; }) => any; }; attrs: any; emit: ((evt: "leave", event: Event) => void) & ... 2 more ... & ((evt: "entryFocus", event: Cust...'.
            Types of property 'slots' are incompatible.
              Type 'Readonly<InternalSlots>' is not assignable to type 'Readonly<{ default: (props: { modelValue: AcceptableValue | AcceptableValue[] | undefined; }) => any; }> & { default: (props: { modelValue: AcceptableValue | ... 1 more ... | undefined; }) => any; }'.
                Property 'default' is missing in type 'Readonly<InternalSlots>' but required in type 'Readonly<{ default: (props: { modelValue: AcceptableValue | AcceptableValue[] | undefined; }) => any; }>'.ts-plugin(2769)
ListboxRoot.d.ts(89, 9): 'default' is declared here.
runtime-core.d.ts(761, 25): The last overload is declared here.

Expected behavior

No type errors when ListboxRoot is used in defineComponent's components option.

Context & Screenshots (if applicable)

No response

@rajalala rajalala added the bug Something isn't working label Oct 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant