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

[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

[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

[dummdidumm]

The underlying problem is that the dependency sswr is using beforeUpdate: https://github.com/ConsoleTVs/sswr/blob/master/src/sswr.ts#L29
Let's use vercel/ai#3107 to track this

[hperrin]

next.174 broke svelte material ui (SMUI) by @hperrin

hperrin/svelte-material-ui#662

The reason SMUI didn't work was because it was using get_current_component from svelte/internal. I've refactored it in the latest prerelease version to use the new event callback system, so it doesn't need to use svelte/internal anymore.

So SMUI will work with Svelte 5, if you install the @beta tag.

[pierre-H]

There is no reactivity for Remult entities :

<script lang="ts">
  import { Entreprise } from "../../shared/Entreprise";
  import { remult } from "remult";

  let entreprise = $state<Entreprise>();

  const entrepriseRepo = remult.repo(Entreprise);

  entrepriseRepo.findId(1).then((e) => (entreprise = e));

  $inspect(entreprise);  // only log the init state, no updates
</script>

<button onclick={() => console.log($state.snapshot(entreprise))}>Log</button>

{#if entreprise}
  <input type="text" bind:value={entreprise.name} />
{/if}

It works only if we save the new state as a new object: entrepriseRepo.findId(1).then((e) => (entreprise = { ...e }));

@jycouet found that the issue was that class instances are not reactive, already discussed here : #11590.

The workaround is to use the toJson repository method : https://remult.dev/docs/ref_repository#tojson

[telcy]

https://github.com/mainmatter/svelte-promise-modals

A modal with Svelte 5 syntax props does not work when trying to call openModal(MyModal).

<!-- MyModal.svelte -->
<script lang="ts">
  import type { CloseModalFn } from 'svelte-promise-modals';

  type Props = {
    closeModal: CloseModalFn<string>;
  };

  let { closeModal }: Props = $props();
</script>

<div>test modal</div>
<button type="button" onclick={() => closeModal('foo')}>close</button>

openModal(MyModal);

[benmccann]

I saw someone mention carbon-icons-svelte: carbon-design-system/carbon-icons-svelte#195

[brunnerh]

@benmccann They forced compilerOptions: { runes: true }, which affects installed libraries as well (#9632).
It works fine when the library is allowed to operate in legacy mode.

[attilabuturla]

This isn't a bug, but the svelte-json-tree library should be updated to include Svelte 5 as a peer dependency.

https://github.com/sveltejs/svelte-json-tree/blob/main/package.json#L58

I don't know if it helps, but I created a PR to take care of it:
sveltejs/svelte-json-tree#6

[techniq]

This isn't a bug, but the svelte-json-tree library should be updated to include Svelte 5 as a peer dependency.

https://github.com/sveltejs/svelte-json-tree/blob/main/package.json#L58

@attilabuturla I've encountered this with LayerChart (maybe why you are reporting 😁) and looks like quite a few libraries are affected (especially those set as peerDependency)

[KieranP]

Add svelte-chartjs to the list of broken packages (due to importing svelte/internal). Ended up removing the dependency and writing my own component.