svelte
svelte copied to clipboard
Svelte component won't type with runes
Describe the bug
If I try to use bind:this to a Svelte component in my project, the typing for the variable tosses this error when I try to type it using the component name: 'Nested' refers to a value, but is being used as a type here. Did you mean 'typeof Nested'?ts(2749)
This worked in svelte 4 and typeof causes other issues since the component is truly the type. Am I using wrong types? Is there something new needed in svelte 5? The code compiles but I'd rather not have this red in my code.
I noticed some files in my project didn't have issues but it looks like those files didn't migrate to use runes (only had eventDispatchers, which don't migrate). The ones which added $state or $props seem to show the symptom.
Reproduction
https://svelte.dev/playground/6b78d2d389534d72b46ecc02e52ff7bd?version=5.1.3
This is the idea but the REPL doesn't really show the problem. I used npx sv create my-app
to create a sveltekit minimal using typescript syntax project, no extras. Then I placed the code in App.svelte in routes/+page.svelte and added Nested.svelte in the same folder.
It tosses this error on the let nestedEl line in +page.svelte: 'Nested' refers to a value, but is being used as a type here. Did you mean 'typeof Nested'?ts(2749)
If I change to typeof Nested, the line is fine but anything else using the variable goes bad.
Logs
No response
System Info
System:
OS: macOS 15.0.1
CPU: (8) arm64 Apple M1
Memory: 94.25 MB / 8.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
npm: 10.9.0 - ~/.nvm/versions/node/v20.11.1/bin/npm
Browsers:
Brave Browser: 129.1.70.126
Chrome: 130.0.6723.70
Safari: 18.0.1
npmPackages:
svelte: ^5.0.0 => 5.1.3
Severity
annoyance