svelte5: Snippet now causes type issues if being passed as prop

[duydang2311]

Describe the bug

Passing a snippet to a parameter of type Snippet will now cause type issues but renders just fine in runtime.

Type '() => ReturnType<import("svelte").Snippet>' is not assignable to type 'Snippet<[]>'.
  Type '{ '{@render ...} must be called with a Snippet': "import type { Snippet } from 'svelte'"; } & typeof SnippetReturn' is not assignable to type '{ '{@render ...} must be called with a Snippet': "import type { Snippet } from 'svelte'"; } & typeof SnippetReturn'. Two different types with this name exist, but they are unrelated.
    Type '{ '{@render ...} must be called with a Snippet': "import type { Snippet } from 'svelte'"; } & unique symbol' is not assignable to type 'unique symbol'

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACsVTTYvbMBD9K69qqROwHejRcUxL6a2Hsru31RaceJwIZEnVR9Jg_N-LZacJXQg9tTpJozdfb-b1rBWSHCuee6bqjljBPhnDUubPZny4I0lPLGVOB7sbLaXbWWF8xRX3ojPaenzWndGKlP-A1uoOSb66mvIpRLLmqlxdfVX_1ilhDHkcSEq9WA5clc7UqjppK5tyFe9c9asZN4xe5U2u2b7pY4ABqwrlmyyDaHHWASZ4-INwePjy7SuEwtHtdEM4CX_A0yNkrfah3hMc2SNZkKq3kpoU_kB2hEmJLWEkAsK5QA7xI8sqrmKi-XyfDldPIzRZLLGp8EA-2GgpJ5YWfCaTs2X-OJVeJRAOSnvUzol9LABeTzmTGVQ-v1RJzhUwxe-R9B8tqYYs8jwf0AXnx0p3tZTUTP3VmL2TApzNc4ph-8sPhnla84A4W2PA-4jS7QU19XG3zv9SUI6nk0Yj2pYsqSmUm1LFoY_LDPopnE-xjZtAZ9SWEJQlWXtqIqX_itSgxI9AcOduq-VdNv9AZlnFUtbpRrSCGlZ4G2hIf4v1Koe_0Gxc-Q1n3nF2q9_7LaxH5E4r59FfNIehuD6KG88N3hmrjVssX-n9Qu_stVgOrxt7GX4B-7tuupEEAAA=

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 Intel(R) Core(TM) i3-10100F CPU @ 3.60GHz
    Memory: 2.45 GB / 15.94 GB
  Binaries:
    Node: 22.5.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
    bun: 1.1.30 - ~\scoop\shims\bun.EXE
  Browsers:
    Edge: Chromium (129.0.2792.89)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    svelte: ^5.0.0-next.269 => 5.0.0-next.269

Severity

annoyance

[nmzein]

I cant seem to reproduce this error, have you checked that you're running the latest versions of the dependencies.

[duydang2311]

Yes, it is happening on [email protected] for me.

I'm not sure if snippet: Snippet is the correct declaration for snippet, but at least that's how it's done in Svelte 5 docs. It just works when I change it to snippet: () => ReturnType<Snippet> as the error shows.

I guess this is the way it should be done and the docs is a bit outdated?

[brunnerh]

Also cannot reproduce this. The main thing that needs to be up do date is your Svelte extension which runs the language server, transforms and checks the code.

[duydang2311]

Svelte extension is latest and I also tried downgrading to old versions from weeks ago, it still showing the error. I'm kinda confused what is happening but this seems like a problem on my end after all this. I'll try re-installing node modules and whatever I can.

Thanks for the confirmation!

[brunnerh]

You can also try running svelte-check, that way you can check the code independently of the IDE and maybe narrow it down a bit more.

[MrBns]

:-) what should I say. I am also getting this error.

[dberlin]

I spent a ton of time tracking this down.
It fails with svelte check as well.

The general version of this is caused by the use of unique symbol as the snippet return type - it is getting confused between instances of the Snippet<[]> type depending on where the import exactly comes from, because every instance of the unique symbol is a different one.

The typeof on the SnippetReturn makes sure that for any imports from the exact same place, you will get the same unique symbol reference. But, unfortunately, if they come from different places, this will fail.

As a concrete example of this, the Snippet type in svelte/src/index.d.ts and the Snippet type in svelte/type/index.d.ts are not the same type, as their returns refer to different unique symbols, each defined in their files.

This is the cause of most of these errors, AFAICT.
The solution, AFAIK is to share the type between both.

I will open a new bug report with more details.