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

• @tanstack/svelte-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! In the meantime there's also a drop-in replacement available at https://www.npmjs.com/package/tanstack-table-8-svelte-5
• 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
• Vercel AI SDK Svelte wrapper - a dependency of that library is using beforeUpdate, the dependency likely needs to be switched out for something else Svelte 5 Support vercel/ai#3107

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

[mquandalle]

• svelte-range-slider-pips breaks as tracked in [bug] Svelte 5 Range handles are not moving when dragged.  simeydotme/svelte-range-slider-pips#130

[simeydotme]

• svelte-range-slider-pips breaks as tracked in [bug] Svelte 5 Range handles are not moving when dragged. simeydotme/svelte-range-slider-pips#130

incase anyone is able to decode, here's the problematic compiled code from my library;

$.pre_effect(() => {
  (
    values(),
    min(),
    max(),
    step(),
    precision(),
    $.get(valueLength),
    $.get(springPositions),
    springValues()
  );

  $.untrack(() => {
    const trimmedAlignedValues = trimRange(values().map((v) => alignValueToStep(v, min(), max(), step(), precision())));
    if (!(values().length === trimmedAlignedValues.length) || !values().every((element, index) => coerceFloat(element, precision()) === trimmedAlignedValues[index])) {
      values(trimmedAlignedValues);
    }
    $.get(springPositions).set(values().map((v) => valueAsPercent(v, min(), max())));
    $.set(valueLength, values().length);
  });
});

^{source code for the block above; https://.com/simeydotme/svelte-range-slider-pips/blob/sveltekit-next/src/lib/components/RangeSlider.svelte#L119-L151}

the springPositions is a spring store created to track the values array prop and animate whenever it is modified. In Svelte4 this is running fine (it's all inside a reactive block $: {}

[zhihengGet]

svelte-sonner no work -> #10359 (comment)

[Leftium]

@skeletonlabs/skeleton lightswitch component has visual artifacts:

• https://kit-demos-git-skeleton2-svelte5-leftium.vercel.app/
• https://.com/Leftium/kit-demos/tree/skeleton2-svelte5
• discussion

Work-arounds:

• "Build Your Own [Lightswitch] Component"
• Fork Skeleton and update Lightswitch component

[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?

[huntabyte]

Hey @dummdidumm, we've had a few reports on a couple of components with Bits/Melt (Range Calendar being one), as well as a few about https://.com/huntabyte/cmdk-sv. I'll confirm and try to put some minimal repros together.