Type Mismatch in Svelte 5 Button Component

[hysuki]

Describe the bug

I’m using @next and encountered an linter issue while upgrading from Svelte 4 to Svelte 5. It seems that when receiving attributes via $props, className is unknown, and for buttons, href is undefined. When I try to pass a string, the linter throws a type mismatch error.

As a result, to avoid the error, I have to use something like:

<Button class="">Click me</Button>

Although I can manually fix the types, it feels a bit tedious.

Are there any plans to fix the type issue?

Reproduction

sv create
npx shadcn-svelte@next init
npx shadcn-svelte@next add button

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
    Memory: 66.56 GB / 127.91 GB
  Binaries:
    Node: 22.9.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.3 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.12.2 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @sveltejs/kit: ^2.0.0 => 2.7.3
    bits-ui: ^1.0.0-next.32 => 1.0.0-next.32
    svelte: ^5.0.0 => 5.1.3

Severity

annoyance

[shyakadavis]

@hysuki

Can't reproduce this issue. Mind sharing a repro, or at the very least how you are typing your $props() in your src/lib/components/ui/button/button.svelte file?

[github-actions]

Please provide a reproduction.

More info

Why do I need to provide a reproduction?

This project is maintained by a very small team, and we simply don't have the bandwidth to investigate issues that we can't easily replicate. Reproductions enable us to fix issues faster and more efficiently. If you care about getting your issue resolved, providing a reproduction is the best way to do that.

I've provided a reproduction - what happens now?

Once a reproduction is provided, we'll remove the needs reproduction label and review the issue to determine how to resolve it. If we can confirm it's a bug, we'll label it as such and prioritize it based on its severity.

If needs reproduction labeled issues don't receive any activity (e.g., a comment with a reproduction link), they'll be closed. Feel free to comment with a reproduction at any time and the issue will be reopened.

How can I create a reproduction?

You can use this template to create a minimal reproduction. You can also link to a GitHub repository with the reproduction.

Please ensure that the reproduction is as minimal as possible. If there is a ton of custom logic in your reproduction, it is difficult to determine if the issue is with your code or with the library. The more minimal the reproduction, the more likely it is that we'll be able to assist.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[hysuki]

@shyakadavis
The steps to reproduce the issue are as mentioned above.
You can find the project where the error occurs here: https://github.com/hysuki/empty-project.

All Svelte-related vscode extensions are latest

[shyakadavis]

The steps to reproduce the issue are as mentioned above.

Yup, tried that but couldn't reproduce. 🙂

You can find the project where the error occurs here: hysuki/empty-project.

Hmm.. from a glance, this looks like a JS project, but for some reason you're using typescript here: https://github.com/hysuki/empty-project/blob/master/src/routes/%2Bpage.svelte#L1 - maybe I'm missing something 🙁

I'm heading home, will have a look soon (unless someone beats me to it.)

[hysuki]

@shyakadavis
I found the issue. It was a problem with type checking during the project setup.

When I first created the project using npx sv create, in the 'Add type checking with Typescript?' prompt, I selected 'using Javascript with JSDoc comments'. Since there were no JSDoc comments in the components, it seems that type inference wasn’t working. I had completely forgotten about this part.

Thanks to your comment, I remembered that I had changed the type checking method during the create project process.

After creating a new project using Typescript syntax, the error no longer occurs.

I think can close this issue now.

Sorry for the trouble!