Svelte 5: List of libraries not working out of the box

[dummdidumm]

Describe the bug

Some libraries don't work with Svelte 5 out of the box. It will probably be impossible to make every library compatible given that some use stuff svelte/internal (which they really shouldn't) and everything in there changed, but those who don't should be closely investigated. Feel free to post libraries you found that don't work in here, ideally along with a small reproduction (repro or "install and use component X").

Won't / can't fix

• Svelte wrapper for Tanstack Table, because it uses svelte/internal in a way that can't be backported Svelte 5 support: ERROR: No matching export in "a" for import "b" TanStack/table#5213 - but a new version of the library is underway with Svelte 5 support!
• cmdk-sv / shadcn-svelte search box - manually interacts with the DOM, needs change in the library Filtering breaks on Svelte-5 huntabyte/cmdk-sv#92

Fixed

• svelte-confetti
• svelte-range-slider-pips (through fix: better interop of $state with actions/$: statements #10543)

Reproduction

Use the libraries and observe errors

Logs

No response

System Info

-

Severity

annoyance

[mstachowiak]

svelte-turnstile breaks as a result of #8301. If that issue is fixed, svelte-turnstile will function properly.

[mstachowiak]

svelte-confetti has been fixed as of version 1.3.2
Mitcheljager/svelte-confetti#10

[dummdidumm]

svelte-turnstile breaks as a result of #8301. If that issue is fixed, svelte-turnstile will function properly.

@mstachowiak what doesn't work exactly here? #8301 is present in Svelte 4 as well. The library should work since it sets the script tag only after it's mounted. Maybe the cause was #9484 which was fixed by #10416 in the meantime - could you try to reproduce again?

[ejsmith]

It seems like a ton of libraries are using svelte/internal is there no way to mimic the functionality of the most common things they are doing to greatly reduce the ecosystem fragmentation?

[dit7ya]

TanStack/table#5213. The svelte wrapper for TanStack Table is using svelte/internal and thus is broken.

[jakubdonovan]

svelteflow.dev - the following error occurs as soon as the dep is installed

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/home/qw/projects/qwerty/node_modules/.pnpm/@xyflow[email protected][email protected]/node_modules/@xyflow/svelte/dist/lib/container/SvelteFlow' is not supported resolving ES modules imported from /home/sol/projects/qwerty/node_modules/.pnpm/@xyflow[email protected][email protected]/node_modules/@xyflow/svelte/dist/lib/index.js

[thenbe]

Svelte wrapper for Tanstack Table, because it uses svelte/internal in a way that can't be backported TanStack/table#5213 - but a new version of the library is underway with Svelte 5 support!

This can be marked as fixed. For now, the fix only exists in the alpha branch (npm i @tanstack/svelte-table@alpha).

[techniq]

Wow that was fast @dummdidumm! I updated both Strava and Github analysis and that does appear to fix this issue.

I'm seeing some other issues but I'll investigate and report separately (mostly with a specific chart in Strava Analysis).

CleanShot.2024-06-19.at.15.01.16.2.mp4

Have to run out the door now though.

[michealparks]

For any Threlte users coming here, there is a next version that is compatible with Svelte 5. See this issue.

[olehmisar]

https://github.com/mattjennings/svelte-modals

breaks because this line always evaluates to true in svelte 5:

https://github.com/mattjennings/svelte-modals/blob/f3d253506021727f7dd0b7d0a50b9676268b57fa/src/lib/Modals.svelte#L5

[7nik]

Components no longer being classes is an official breaking change, and Svelte can do nothing here.
Svelte-modals can differentiate components and getters by a number of arguments, which should work in Svelte 3 as well.

[Dudek-AMS]

next.174 broke svelte material ui (SMUI) by @hperrin
hperrin/svelte-material-ui#662

[ghostdevv]

svelte-turnstile

Just seen this - I took a quick look and it seems as though the key block with $$props in it isn't reactive. I'll try and get some time to make a minimal reproduction. I made an issue on svelte turnstile for tracking - the way I did the reactivity here isn't great anyway and is overdue a change

[Razunter]

In my case with [email protected] html elements set with bind:this are undefined in onMount() while in Svelte 4 they are defined at this point. And this breaks a lot of stuff.

UPD: this is with https://github.com/romkor/svelte-portal library, without using portal it works fine. Looks like use: causes this, maybe with async.

[dummdidumm]

Please open a separate issue with a reproduction for this

[josdejong]

First: great work on Svelte 5, I'm looking forward to the release 👍

I'm working on upgrading svelte-jsoneditor to Svelte 5 but there are quite some issues. See the following PR for details: josdejong/svelte-jsoneditor#476

Most important is that the Rollup bundling (for use of the library in a vanilla environment) is broken and Rollup warns about circular references in the svelte code being compiled. Help with the Rollup issues would be great.

Besides that, there are some styling issues and event handlers that are broken now, I can probably get that fixed that myself.

[itswadesh]

I guess svelte-5 is close to its release. There are only 8 issues left. I have started working towards upgrading svelte-commerce to svelte5

[memestageceo]

Shadcn-svelte Combobox works in Svelte 4, but doesn't in Svelte 5. Tried with both, the code is same in both, the only different is svelte version.

I've created a repo for the same. The svelte 4 works well, svelte 5 fails - keeps adding new items when trying to filter lists

https://github.com/memestageceo/combobox-4v5.git

PS: Posting it here as I think that Svelte 5 is meant to be backward compatible, but in this case, it isn't. I don't know how to figure this out more than this, so kindly clone the repo and test it out. I've set up everything for both svelte 4 and svelte 5.

[dummdidumm]

This sounds like huntabyte/cmdk-sv#92, which isn't solveable on our end, and needs adjustment in the library.

[adwher]

vercel/ai with the @ai-sdk/svelte is not working due they're using svelte/stores, do not work on Runes mode.

Svelte 5: Runes mode

Svelte 5: Compatibility mode