Type errors with newer packages

[matthijs166]

Describe the bug

Love the work you guys do!

I got a strict pipeline for a project where before a pull request all svelte check errors should be none.
After upgrading some packages, I noticed a type error in the button (I think because of the new svelte version 5.16.0, in version 5.15.0 everything is fine)

Everything seems fine in my project, just looks like a type error when upgrading the packages.

/home/projects/github-skbvdmqj/src/lib/components/ui/button/button.svelte:18:44
Error: Type 'string | ClassArray | ClassDictionary | null | undefined' is not assignable to type 'ClassNameValue'.
Type 'ClassArray' is not assignable to type 'ClassNameValue'.
Type 'ClassValue[]' is not assignable to type 'ClassNameArray'.
Type 'ClassValue' is not assignable to type 'ClassNameValue'.
Type 'number' is not assignable to type 'ClassNameValue'. (ts)
{builders}
class={cn(buttonVariants({ variant, size, className }))}
type="button"

I also noticed some more type errors in the project when running the stack blitz template with newer packages.

Not really major, just some type errors that would make me sleep better..

Reproduction

https://stackblitz.com/edit/github-skbvdmqj?file=package.json

See errors and warnings in terminal

Logs

❯ pnpm check

> [email protected] check /home/projects/github-skbvdmqj
> svelte-kit sync && svelte-check --tsconfig ./tsconfig.json


====================================
Loading svelte-check in workspace: /home/projects/github-skbvdmqj
Getting Svelte diagnostics...

/home/projects/github-skbvdmqj/src/lib/components/ui/button/button.svelte:18:44
Error: Type 'string | ClassArray | ClassDictionary | null | undefined' is not assignable to type 'ClassNameValue'.
  Type 'ClassArray' is not assignable to type 'ClassNameValue'.
    Type 'ClassValue[]' is not assignable to type 'ClassNameArray'.
      Type 'ClassValue' is not assignable to type 'ClassNameValue'.
        Type 'number' is not assignable to type 'ClassNameValue'. (ts)
        {builders}
        class={cn(buttonVariants({ variant, size, className }))}
        type="button"


/home/projects/github-skbvdmqj/src/lib/components/ui/carousel/carousel-content.svelte:7:7
Error: Argument of type '$$Props' is not assignable to parameter of type '{ class?: string | null | undefined; }'.
  Types of property 'class' are incompatible.
    Type 'string | ClassArray | ClassDictionary | null | undefined' is not assignable to type 'string | null | undefined'.
      Type 'ClassArray' is not assignable to type 'string'. (ts)

        type $$Props = HTMLAttributes<HTMLDivElement>;



/home/projects/github-skbvdmqj/src/lib/components/ui/carousel/carousel-item.svelte:6:7
Error: Argument of type '$$Props' is not assignable to parameter of type '{ class?: string | null | undefined; }'.
  Types of property 'class' are incompatible.
    Type 'string | ClassArray | ClassDictionary | null | undefined' is not assignable to type 'string | null | undefined'.
      Type 'ClassArray' is not assignable to type 'string'. (ts)

        type $$Props = HTMLAttributes<HTMLDivElement>;
        let className: string | undefined | null = undefined;


/home/projects/github-skbvdmqj/src/lib/components/ui/command/command.svelte:5:7
Error: Argument of type 'CommandProps' is not assignable to parameter of type '{ value?: string | undefined; class?: string | null | undefined; }'.
  Types of property 'class' are incompatible.
    Type 'string | ClassArray | ClassDictionary | null | undefined' is not assignable to type 'string | null | undefined'.
      Type 'ClassArray' is not assignable to type 'string'. (ts)

        type $$Props = CommandPrimitive.CommandProps;



/home/projects/github-skbvdmqj/src/lib/components/ui/command/command-empty.svelte:5:7
Error: Argument of type 'EmptyProps' is not assignable to parameter of type '{ class?: string | null | undefined; }'.
  Types of property 'class' are incompatible.
    Type 'string | ClassArray | ClassDictionary | null | undefined' is not assignable to type 'string | null | undefined'.
      Type 'ClassArray' is not assignable to type 'string'. (ts)

        type $$Props = CommandPrimitive.EmptyProps;
        let className: string | undefined | null = undefined;


/home/projects/github-skbvdmqj/src/lib/components/ui/command/command-group.svelte:4:7
Error: Argument of type 'GroupProps' is not assignable to parameter of type '{ class?: string | null | undefined; }'.
  Types of property 'class' are incompatible.
    Type 'string | ClassArray | ClassDictionary | null | undefined' is not assignable to type 'string | null | undefined'.
      Type 'ClassArray' is not assignable to type 'string'. (ts)
        import { cn } from "$lib/utils";
        type $$Props = CommandPrimitive.GroupProps;



/home/projects/github-skbvdmqj/src/lib/components/ui/command/command-item.svelte:5:7
Error: Argument of type 'ItemProps' is not assignable to parameter of type '{ asChild?: boolean | undefined; class?: string | null | undefined; }'.
  Types of property 'class' are incompatible.
    Type 'string | ClassArray | ClassDictionary | null | undefined' is not assignable to type 'string | null | undefined'.
      Type 'ClassArray' is not assignable to type 'string'. (ts)

        type $$Props = CommandPrimitive.ItemProps;



/home/projects/github-skbvdmqj/src/lib/components/ui/command/command-input.svelte:6:7
Error: Argument of type 'InputProps' is not assignable to parameter of type '{ class?: string | null | undefined; value?: string | undefined; }'.
  Types of property 'class' are incompatible.
    Type 'string | ClassArray | ClassDictionary | null | undefined' is not assignable to type 'string | null | undefined'.
      Type 'ClassArray' is not assignable to type 'string'. (ts)

        type $$Props = CommandPrimitive.InputProps;



/home/projects/github-skbvdmqj/src/lib/components/ui/command/command-list.svelte:5:7
Error: Argument of type 'ListProps' is not assignable to parameter of type '{ class?: string | null | undefined; }'.
  Types of property 'class' are incompatible.
    Type 'string | ClassArray | ClassDictionary | null | undefined' is not assignable to type 'string | null | undefined'.
      Type 'ClassArray' is not assignable to type 'string'. (ts)

        type $$Props = CommandPrimitive.ListProps;
        let className: string | undefined | null = undefined;


/home/projects/github-skbvdmqj/src/lib/components/ui/command/command-separator.svelte:5:7
Error: Argument of type 'SeparatorProps' is not assignable to parameter of type '{ class?: string | null | undefined; }'.
  Types of property 'class' are incompatible.
    Type 'string | ClassArray | ClassDictionary | null | undefined' is not assignable to type 'string | null | undefined'.
      Type 'ClassArray' is not assignable to type 'string'. (ts)

        type $$Props = CommandPrimitive.SeparatorProps;
        let className: string | undefined | null = undefined;


/home/projects/github-skbvdmqj/src/lib/components/ui/command/command-shortcut.svelte:5:7
Error: Argument of type '$$Props' is not assignable to parameter of type '{ class?: string | null | undefined; }'.
  Types of property 'class' are incompatible.
    Type 'string | ClassArray | ClassDictionary | null | undefined' is not assignable to type 'string | null | undefined'.
      Type 'ClassArray' is not assignable to type 'string'. (ts)

        type $$Props = HTMLAttributes<HTMLSpanElement>;



/home/projects/github-skbvdmqj/src/lib/components/ui/drawer/drawer-content.svelte:21:3
Warn: Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
https://svelte.dev/e/element_invalid_self_closing_tag (svelte)
        >
                <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
                <slot />


/home/projects/github-skbvdmqj/src/lib/components/ui/form/form-description.svelte:6:7
Error: Argument of type '$$Props' is not assignable to parameter of type '{ class?: string | null | undefined; }'.
  Types of property 'class' are incompatible.
    Type 'string | ClassArray | ClassDictionary | null | undefined' is not assignable to type 'string | null | undefined'.
      Type 'ClassArray' is not assignable to type 'string'. (ts)

        type $$Props = HTMLAttributes<HTMLSpanElement>;
        let className: string | undefined | null = undefined;


/home/projects/github-skbvdmqj/src/lib/components/ui/pagination/pagination-ellipsis.svelte:13:2
Warn: The value of 'aria-hidden' must be either 'true' or 'false'. It cannot be empty
https://svelte.dev/e/a11y_incorrect_aria_attribute_type_boolean (svelte)
<span
        aria-hidden
        class={cn("flex h-9 w-9 items-center justify-center", className)}


/home/projects/github-skbvdmqj/src/lib/components/ui/progress/progress.svelte:17:2
Warn: Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
https://svelte.dev/e/element_invalid_self_closing_tag (svelte)
>
        <div
                class="h-full w-full flex-1 bg-primary transition-all"
                style={`transform: translateX(-${100 - (100 * (value ?? 0)) / (max ?? 1)}%)`}
        />
</ProgressPrimitive.Root>


/home/projects/github-skbvdmqj/src/lib/components/ui/skeleton/skeleton.svelte:11:1
Warn: Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
https://svelte.dev/e/element_invalid_self_closing_tag (svelte)

<div class={cn("animate-pulse rounded-md bg-muted", className)} {...$$restProps} />


/home/projects/github-skbvdmqj/src/lib/components/ui/textarea/textarea.svelte:12:1
Warn: Self-closing HTML tags for non-void elements are ambiguous — use `<textarea ...></textarea>` rather than `<textarea ... />`
https://svelte.dev/e/element_invalid_self_closing_tag (svelte)

<textarea
        class={cn(
                "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
                className
        )}
        bind:value
        on:blur
        on:change
        on:click
        on:focus
        on:keydown
        on:keypress
        on:keyup
        on:mouseover
        on:mouseenter
        on:mouseleave
        on:paste
        on:input
        {...$$restProps}
/>


/home/projects/github-skbvdmqj/src/lib/components/ui/toggle/toggle.svelte:21:44
Error: Type 'string | ClassArray | ClassDictionary | null | undefined' is not assignable to type 'ClassNameValue'.
  Type 'ClassArray' is not assignable to type 'ClassNameValue'.
    Type 'ClassValue[]' is not assignable to type 'ClassNameArray'.
      Type 'ClassValue' is not assignable to type 'ClassNameValue'.
        Type 'number' is not assignable to type 'ClassNameValue'. (ts)
        bind:pressed
        class={cn(toggleVariants({ variant, size, className }))}
        {...$$restProps}


/home/projects/github-skbvdmqj/src/lib/components/ui/toggle-group/toggle-group.svelte:9:7
Error: Argument of type '$$Props' is not assignable to parameter of type '{ class?: string | null | undefined; variant?: "default" | "outline" | undefined; size?: "default" | "sm" | "lg" | undefined; value?: (T extends "single" ? string : string[]) | undefined; }'.
  Types of property 'class' are incompatible.
    Type 'string | ClassArray | ClassDictionary | null | undefined' is not assignable to type 'string | null | undefined'.
      Type 'ClassArray' is not assignable to type 'string'. (ts)
        type T = $$Generic<"single" | "multiple">;
        type $$Props = ToggleGroupPrimitive.Props<T> & VariantProps<typeof toggleVariants>;



/home/projects/github-skbvdmqj/src/lib/components/ui/toggle-group/toggle-group-item.svelte:7:7
Error: Argument of type '$$Props' is not assignable to parameter of type '{ class?: string | null | undefined; variant?: "default" | "outline" | undefined; size?: "default" | "sm" | "lg" | undefined; value: string | (string & string[]); }'.
  Types of property 'class' are incompatible.
    Type 'string | ClassArray | ClassDictionary | null | undefined' is not assignable to type 'string | null | undefined'.
      Type 'ClassArray' is not assignable to type 'string'. (ts)

        type $$Props = ToggleGroupPrimitive.ItemProps & ToggleVariants;



====================================
svelte-check found 15 errors and 5 warnings in 20 files

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @sveltejs/kit: ^2.15.1 => 2.15.1 
    bits-ui: ^0.22.0 => 0.22.0 
    cmdk-sv: ^0.0.13 => 0.0.13 
    formsnap: ^0.5.0 => 0.5.0 
    lucide-svelte: ^0.469.0 => 0.469.0 
    mode-watcher: ^0.2.1 => 0.2.1 
    svelte: ^5.16.0 => 5.16.0 
    svelte-sonner: ^0.3.18 => 0.3.18 
    sveltekit-superforms: ^2.5.0 => 2.5.0 
    vaul-svelte: ^0.2.4 => 0.2.4

Severity

annoyance

[ieedan]

This has already been fixed you can upgrade your components.

#1582