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

Question

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

dummdidumm opened this issue 2 years ago · 78 comments

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 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 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 vercel/ai#3107

Fixed

svelte-confetti
svelte-range-slider-pips (through #10543)

Reproduction

Use the libraries and observe errors

Logs

No response

System Info

Severity

annoyance

Answer 1 · 2024-02-02T17:41:40.000Z

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

Answer 2 · 2024-02-02T21:10:17.000Z

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

Answer 3 · 2024-02-10T00:08:27.000Z

svelte-range-slider-pips breaks as tracked in simeydotme/svelte-range-slider-pips#130

Answer 4 · 2024-02-12T17:18:52.000Z

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://github.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 $: {}

Answer 5 · 2024-02-16T22:34:56.000Z

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

Answer 6 · 2024-02-17T05:42:37.000Z

@skeletonlabs/skeleton lightswitch component has visual artifacts:

Work-arounds:

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

Answer 7 · 2024-02-19T13:41:30.000Z

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?

Answer 8 · 2024-02-20T04:27:52.000Z

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://github.com/huntabyte/cmdk-sv. I'll confirm and try to put some minimal repros together.

Answer 9 · 2024-02-20T18:24:00.000Z

Just tested svelte-range-slider-pips with svelte@5.0.0-next.62 which includes #10543, and it's still not working, the cursor doesn't move.

Answer 10 · 2024-02-21T13:12:50.000Z

@mquandalle can you provide a reproduction? I tried the code snippet in the related svelte-range-slider-pips issue and it's working for me.

@Leftium the bug with the artifact should be fixed through #10555

Answer 11 · 2024-02-23T05:25:36.000Z

@dummdidumm Confirmed artifact is gone!

Answer 12 · 2024-02-24T06:50:14.000Z

svelte-sonner repro: https://stackblitz.com/edit/sveltejs-kit-template-default-y7ihkq?file=src%2Froutes%2FCounter.svelte

or just install "svelte-sonner" and use component with latest svelte 5 (alpha 68 at this moment)

In the browser console it says: ERR_SVELTE_TOO_MANY_UPDATES

Answer 13 · 2024-02-27T05:18:53.000Z

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?

Answer 14 · 2024-02-27T09:12:44.000Z

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

Answer 15 · 2024-02-27T22:22:08.000Z

i'm using shadcn-svelte and trying to get the combo box example working with the current version of svelte 5. I've installed all the below dependancies for it to work:

npx shadcn-svelte@latest add popover
npx shadcn-svelte@latest add command
npm install cmdk-sv

When installing these i need to use --force as otherwise i can't install any of the shadcn-svelte components. I've been told that its because it uses svelte/internal. You can see the error i get when trying without force in the second code example below. However more importantly I get the below error when I try to open a page with the combo box element on it

Error with combo installed using --force

✘ [ERROR] Invalid assignment target

    node_modules/cmdk-sv/dist/cmdk/components/Command.svelte:82:30:
      82 │       $.mutate_store(stateStore, $.untrack($stateStore).value() = value2, $.untrack($stateStore));
         ╵                                  ^

9:10:29 AM [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/cmdk-sv/dist/cmdk/components/Command.svelte:82:30: ERROR: Invalid assignment target
    at failureErrorWithLog (/Users/me/Sites/my-project-v4/node_modules/esbuild/lib/main.js:1651:15)
    at /Users/me/Sites/my-project-v4/node_modules/esbuild/lib/main.js:1059:25
    at /Users/me/Sites/my-project-v4/node_modules/esbuild/lib/main.js:1527:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Error when trying to install any shadcn-svelte component without --force

ERROR: Command failed with exit code 1: npm install paneforge
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: my-project-v4@0.0.1
npm ERR! Found: svelte@5.0.0-next.68
npm ERR! node_modules/svelte
npm ERR!   svelte@"^5.0.0-next.55" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer svelte@"^4.0.0" from paneforge@0.0.2
npm ERR! node_modules/paneforge
npm ERR!   paneforge@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /Users/me/.npm/_logs/2024-02-27T22_20_26_351Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/me/.npm/_logs/2024-02-27T22_20_26_351Z-debug-0.log

Answer 16 · 2024-03-06T05:53:50.000Z

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+svelte@0.0.37_svelte@5.0.0-next.69/node_modules/@xyflow/svelte/dist/lib/container/SvelteFlow' is not supported resolving ES modules imported from /home/sol/projects/qwerty/node_modules/.pnpm/@xyflow+svelte@0.0.37_svelte@5.0.0-next.69/node_modules/@xyflow/svelte/dist/lib/index.js

Answer 17 · 2024-03-08T17:07:13.000Z

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

@dummdidumm most of the issues I'm seeing in a few different components consist of the ERR_SVELTE_TOO_MANY_UPDATES. The functionality appears to work as expected, but the error is displayed in the browser's console.

Reproduction

Launch minimal repro Stackblitz
Click "Show Toast" button
Observe errors in the browser console

Answer 18 · 2024-03-12T15:12:07.000Z

@dummdidumm About svelte-range-slider-pips, an issue with the slider is still present if bind:valuesis used: Svelte 5 REPL • Svelte 4 REPL

Answer 19 · 2024-03-30T08:16:49.000Z

I am using flowbite-svelte,most of the components work well with svelte5.But some components couldn't work properly.
1. When I use Dropdown in some page ,the page wouldn't display ,and there will be some error in the console of the browser:

**ERR_SVELTE_HYDRATION_MISMATCH: Hydration failed because the initial UI does not match what was rendered on the server. Error: Rest element properties of $props() such as undefined.arrow are readonly**
    set props.js:48
    Dropdown Dropdown.svelte:29
    untrack runtime.js:848
    legacy_pre_effect effects.js:187
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    legacy_pre_effect effects.js:178
    Dropdown flowbite-svelte.js:6064
    _page +page.svelte:80
    children root.svelte:92
    validate_dynamic_component validate.js:30
    children root.svelte:90
    effect2 svelte-component.js:48
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    component_effect svelte-component.js:46
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    component svelte-component.js:34
    children root.svelte:89
    snippet snippet.js:20
    untrack runtime.js:848
    snippet snippet.js:20
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    snippet snippet.js:15
    _layout +layout.svelte:39
    Root root.svelte:80
    validate_dynamic_component validate.js:30
    Root root.svelte:78
    effect2 svelte-component.js:48
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    component_effect svelte-component.js:46
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    component svelte-component.js:34
    Root root.svelte:77
    consequent_effect if.js:76
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    if_effect if.js:74
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    if_block if.js:45
    Root root.svelte:69
    effect2 render.js:240
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    _mount render.js:224
    hydrate render.js:162
    flush_sync runtime.js:628
    hydrate render.js:161
    Svelte4Component legacy-client.js:73
    <anonymous> legacy-client.js:45
    initialize client.js:433
    _hydrate client.js:2385
render.js:172:11
**Uncaught (in promise) Error: Rest element properties of $props() such as undefined.arrow are readonly**
    set props.js:48
    Dropdown Dropdown.svelte:29
    untrack runtime.js:848
    legacy_pre_effect effects.js:187
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    legacy_pre_effect effects.js:178
    Dropdown flowbite-svelte.js:6064
    _page +page.svelte:80
    children root.svelte:92
    validate_dynamic_component validate.js:30
    children root.svelte:90
    effect2 svelte-component.js:48
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    component_effect svelte-component.js:46
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    component svelte-component.js:34
    children root.svelte:89
    snippet snippet.js:20
    untrack runtime.js:848
    snippet snippet.js:20
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    snippet snippet.js:15
    _layout +layout.svelte:39
    Root root.svelte:80
    validate_dynamic_component validate.js:30
    Root root.svelte:78
    effect2 svelte-component.js:48
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    component_effect svelte-component.js:46
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    component svelte-component.js:34
    Root root.svelte:77
    consequent_effect if.js:76
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    if_effect if.js:74
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    if_block if.js:45
    Root root.svelte:69
    effect2 render.js:240
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    _mount render.js:224
    mount render.js:120
    flush_sync runtime.js:628
    mount render.js:120
    hydrate render.js:183
    Svelte4Component legacy-client.js:73
    <anonymous> legacy-client.js:45
    initialize client.js:433
    _hydrate client.js:2385
props.js:48:9

2. When i use Navbar in some page ,the page wouldn't display too,and some other errors occur in the console of the browser:

**ERR_SVELTE_HYDRATION_MISMATCH: Hydration failed because the initial UI does not match what was rendered on the server. Error: Rest element properties of $props() such as undefined.color are readonly**
    set props.js:48
    Navbar Navbar.svelte:11
    untrack runtime.js:848
    legacy_pre_effect effects.js:187
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    legacy_pre_effect effects.js:178
    Navbar flowbite-svelte.js:10299
    _page +page.svelte:80
    children root.svelte:92
    validate_dynamic_component validate.js:30
    children root.svelte:90
    effect2 svelte-component.js:48
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    component_effect svelte-component.js:46
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    component svelte-component.js:34
    children root.svelte:89
    snippet snippet.js:20
    untrack runtime.js:848
    snippet snippet.js:20
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    snippet snippet.js:15
    _layout +layout.svelte:39
    Root root.svelte:80
    validate_dynamic_component validate.js:30
    Root root.svelte:78
    effect2 svelte-component.js:48
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    component_effect svelte-component.js:46
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    component svelte-component.js:34
    Root root.svelte:77
    consequent_effect if.js:76
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    if_effect if.js:74
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    if_block if.js:45
    Root root.svelte:69
    effect2 render.js:240
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    _mount render.js:224
    hydrate render.js:162
    flush_sync runtime.js:628
    hydrate render.js:161
    Svelte4Component legacy-client.js:73
    <anonymous> legacy-client.js:45
    initialize client.js:433
    _hydrate client.js:2385
    start client.js:293
    <anonymous> (index):6127
    promise callback* (index):6126
[render.js:172:11](http://localhost:5173/node_modules/.pnpm/svelte@5.0.0-next.82/node_modules/svelte/src/internal/client/render.js)
**Uncaught (in promise) Error: Rest element properties of $props() such as undefined.color are readonly**
    set props.js:48
    Navbar Navbar.svelte:11
    untrack runtime.js:848
    legacy_pre_effect effects.js:187
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    legacy_pre_effect effects.js:178
    Navbar flowbite-svelte.js:10299
    _page +page.svelte:80
    children root.svelte:92
    validate_dynamic_component validate.js:30
    children root.svelte:90
    effect2 svelte-component.js:48
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    component_effect svelte-component.js:46
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    component svelte-component.js:34
    children root.svelte:89
    snippet snippet.js:20
    untrack runtime.js:848
    snippet snippet.js:20
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    snippet snippet.js:15
    _layout +layout.svelte:39
    Root root.svelte:80
    validate_dynamic_component validate.js:30
    Root root.svelte:78
    effect2 svelte-component.js:48
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    component_effect svelte-component.js:46
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    component svelte-component.js:34
    Root root.svelte:77
    consequent_effect if.js:76
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    if_effect if.js:74
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    if_block if.js:45
    Root root.svelte:69
    effect2 render.js:240
    execute_reaction_fn runtime.js:235
    execute_effect runtime.js:401
    schedule_effect runtime.js:485
    create_effect effects.js:67
    render_effect effects.js:229
    _mount render.js:224
    mount render.js:120
    flush_sync runtime.js:628
    mount render.js:120
    hydrate render.js:183
    Svelte4Component legacy-client.js:73
    <anonymous> legacy-client.js:45
    initialize client.js:433
    _hydrate client.js:2385
    start client.js:293
    <anonymous> (index):6127
    promise callback* (index):6126
[props.js:48:9](http://localhost:5173/node_modules/.pnpm/svelte@5.0.0-next.82/node_modules/svelte/src/internal/client/reactivity/props.js)

Answer 20 · 2024-04-26T20:21:44.000Z

Same issue as @manortec. It arrises from this line of code in Navbar.svelte in the flowbite-svelte library:

$$restProps.color = $$restProps.color ?? 'navbar';

Prior to svelte 5.0.0-next.81 it worked. I can see that the multiple components in flowbite-svelte uses the mechanism of setting properties on $$restProps.

Answer 21 · 2024-04-27T08:04:55.000Z

https://github.com/vkurko/calendar

Error when evaluating SSR module /node_modules/svelte/src/internal/index.js:
|- Error: Your application, or one of its dependencies, 
imported from 'svelte/internal', which was a private module used by Svelte 4 components that no longer exists in Svelte 5

The library is using a lot of svelte/internal

import { run_all, is_function, noop, identity, tick, SvelteComponent, init, safe_not_equal, ensure_array_like, empty, insert, detach, destroy_each, component_subscribe, set_store_value, element, text, attr, append, listen, set_data, action_destroyer, transition_in, group_outros, check_outros, transition_out, space, create_component, mount_component, destroy_component, construct_svelte_component, set_style, get_current_component } from 'svelte/internal';

Answer 22 · 2024-04-30T00:27:51.000Z

@dummdidumm Kitbook copies the Svelte DevTools chrome extension use of SvelteRegisterBlock, SvelteRegisterComponent and the create_fragment m, p, and d functions to build up the active component tree w/ associated dom elements. I've looked around a bit (particularly in ownership.js at mark_module_start and mark_module_end) for the equivalents in Svelte 5 but it's not apparent to me what a good path forward would be. See this comment for a little more context. Do you guys have a plan yet for how the Svelte DevTools is going to track with mounted components and elements? Is this going to need to wait for the final 5.0 release? Thanks!

Answer 23 · 2024-04-30T07:41:34.000Z

Created #11389 to track the devtools integration story

Answer 24 · 2024-05-02T18:11:25.000Z

We're seeing a number of issues with Bits UI components breaking only in dev. Components like Dialog and Menubar throw the following error:

Menubar Error

bits-ui.js?v=7a1ae505:33214 Uncaught (in promise) TypeError: Cannot destructure property 'builders' of 'getCtx17(...)' as it is undefined.
    at setMenuCtx (bits-ui.js?v=7a1ae505:33214:21)
    at Menubar_menu (bits-ui.js?v=7a1ae505:33461:7)
    at Object.fn (chunk-OCBBHJ6B.js?v=7a1ae505:136:44)
    at execute_reaction_fn (chunk-7S5HFIC4.js?v=7a1ae505:1054:22)
    at execute_effect (chunk-7S5HFIC4.js?v=7a1ae505:1171:20)
    at create_effect (chunk-7S5HFIC4.js?v=7a1ae505:368:7)
    at branch (chunk-7S5HFIC4.js?v=7a1ae505:449:10)
    at Object.fn (chunk-OCBBHJ6B.js?v=7a1ae505:132:17)
    at execute_reaction_fn (chunk-7S5HFIC4.js?v=7a1ae505:1054:22)
    at execute_effect (chunk-7S5HFIC4.js?v=7a1ae505:1171:20)

While other components like Accordion throw a different error:

Accordion Error

bits-ui.js?v=7a1ae505:16299 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'item')
    at Accordion_item (bits-ui.js?v=7a1ae505:16299:23)
    at Object.fn (chunk-OCBBHJ6B.js?v=7a1ae505:136:44)
    at execute_reaction_fn (chunk-7S5HFIC4.js?v=7a1ae505:1054:22)
    at execute_effect (chunk-7S5HFIC4.js?v=7a1ae505:1171:20)
    at create_effect (chunk-7S5HFIC4.js?v=7a1ae505:368:7)
    at branch (chunk-7S5HFIC4.js?v=7a1ae505:449:10)
    at Object.fn (chunk-OCBBHJ6B.js?v=7a1ae505:132:17)
    at execute_reaction_fn (chunk-7S5HFIC4.js?v=7a1ae505:1054:22)
    at execute_effect (chunk-7S5HFIC4.js?v=7a1ae505:1171:20)
    at create_effect (chunk-7S5HFIC4.js?v=7a1ae505:368:7)

However, everything works perfectly when the project is built for prod and viewed with vite preview.

Reproduction: https://github.com/AdrianGonz97/svelte-5-bits-ui-dev-issue

Edit: Now fixed as of 5.0.0-next.123 🎉

Answer 25 · 2024-05-03T08:10:32.000Z

That's #11429 which was fixed by #11438, release soon

Answer 26 · 2024-05-06T09:18:48.000Z

Having issues with svelte-sonner which shadcn-svelte/sonner is built on top off and also with shadcn-svelte/calendar . This error breaks the application in dev mode and a user can't continue using it. I've not tested if this impacts a production deployment though.

chunk-5GYOHR6R.js?v=c19da7a9:680 Uncaught Error: ERR_SVELTE_TOO_MANY_UPDATES: Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops.
    at infinite_loop_guard (chunk-5GYOHR6R.js?v=c19da7a9:680:11)
    at flush_queued_effects (chunk-5GYOHR6R.js?v=c19da7a9:689:5)
    at flush_local_render_effects (chunk-5GYOHR6R.js?v=c19da7a9:822:3)
    at chunk-5GYOHR6R.js?v=c19da7a9:1294:7
    at execute_signal_fn (chunk-5GYOHR6R.js?v=c19da7a9:537:7)
    at execute_effect (chunk-5GYOHR6R.js?v=c19da7a9:658:31)
    at flush_queued_effects (chunk-5GYOHR6R.js?v=c19da7a9:700:13)
    at process_microtask (chunk-5GYOHR6R.js?v=c19da7a9:721:3)
chunk-5GYOHR6R.js?v=c19da7a9:680 Uncaught Error: ERR_SVELTE_TOO_MANY_UPDATES: Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops.
    at infinite_loop_guard (chunk-5GYOHR6R.js?v=c19da7a9:680:11)
    at flush_queued_effects (chunk-5GYOHR6R.js?v=c19da7a9:689:5)
    at process_microtask (chunk-5GYOHR6R.js?v=c19da7a9:721:3)

Answer 27 · 2024-05-06T11:31:11.000Z

@vexkiddy seems to be working on the latest version. REPL.
Version next.55 is really ancient.

Answer 28 · 2024-05-06T11:46:02.000Z

brilliant! thanks @7nik :)

Answer 29 · 2024-05-07T19:34:49.000Z

sveltekit-superforms - ciscoheat/sveltekit-superforms#426 - incompatible in rune mode for the entire app.

Answer 30 · 2024-05-07T19:38:39.000Z

svelte-highlight - incompatible in rune mode for the entire app, but there is a compatible alternative - svelte-rune-highlight

Answer 31 · 2024-05-07T20:08:59.000Z

From the linked issue it sounds like you're setting runes: true in the compiler options. You shouldn't be doing this when using any component libraries that are still using Svelte 4 syntax. Instead it's best to implicitly opt into runes mode on a per file basis by using runes inside your components.

Answer 32 · 2024-05-07T21:10:48.000Z

Yeah, I did that, but I decided to come at it from the other angle and, following the advice from here, turned rune mode on for the entire app and turned it off for the individual incompatible library.

svelte.config.js

  vitePlugin: {
    dynamicCompileOptions({filename}) {
      if (filename.includes('node_modules/sveltekit-superforms')) {
        return {runes: false}
      }
    },
  },

I think it would be helpful to have this info in the documentation.

Answer 33 · 2024-05-08T18:22:46.000Z

This is a weird one that I'm able to consistently reproduce (see repro below) on latest version of Svelte 5, Superforms, Formsnap, and Bits UI. Whenever a form input binds to control attrs, which is the recommended approach, any event handlers attached to that input do not fire. However, removing the {...attrs} spread appears to work.

Repro: https://stackblitz.com/~/github.com/pheuter/formcontrol-event-repro

Broken:

<Form.Field {form} name="firstName">
	<Form.Control let:attrs>
		<Form.Label>First Name (`oninput` broken)</Form.Label>
		<Input
			{...attrs}
			bind:value={$formData.firstName}
			oninput={(e) => alert(`onchange: ${e.currentTarget.value}`)}
		/>
	</Form.Control>
	<Form.FieldErrors />
</Form.Field>

Working:

<Form.Field {form} name="lastName">
	<Form.Control>
		<Form.Label>Last Name (`oninput` working)</Form.Label>
		<Input
			bind:value={$formData.lastName}
			oninput={(e) => alert(`onchange: ${e.currentTarget.value}`)}
		/>
	</Form.Control>
	<Form.FieldErrors />
</Form.Field>

Answer 34 · 2024-05-16T12:50:27.000Z

I have an issue with svelte-awesome-color-picker. There's already an issue 69 in the repo itself and an issue 11648 on the Svelte repo (where there's been some discussion).

The props of inner component are not updated properly inside the library components.

Answer 35 · 2024-05-31T02:57:13.000Z

I just ran LayerChart's docs using the latest Svelte 5 (5.0.0-next.144 as of writing this) and it was experiencing quite a few problems (all dialogs open by default, non reactive toggles, 100% CPU on some pages, etc). Some of these are likely coming from Svelte UX components as well (which has been pretty good to tease out regressions).

I'll be investigating these as I get time and hopefully create minimal REPL reproductions when possible, but wanted to give a heads up in case someone else has time to take a look.

I did just log an SVG namespace issue (#11847) that was uncovered.

Answer 36 · 2024-06-03T00:17:26.000Z

Possibly related to what @techniq is seeing, LayerCake is having an issue on 5.0.0-next.148 where listeners2 is not defined. Seems to be related to observing the width of an element. I'm only getting the error intermittently, though, and I haven't been able to track it down more than that.

Answer 37 · 2024-06-11T18:34:38.000Z

Possibly related to what @techniq is seeing, LayerCake is having an issue on 5.0.0-next.148 where listeners2 is not defined. Seems to be related to observing the width of an element. I'm only getting the error intermittently, though, and I haven't been able to track it down more than that.

I see the same thing, but it only happens in dev - when I build and run the app it works fine.

Answer 38 · 2024-06-12T02:20:39.000Z

Possibly related to what @techniq is seeing, LayerCake is having an issue on 5.0.0-next.148 where listeners2 is not defined. Seems to be related to observing the width of an element. I'm only getting the error intermittently, though, and I haven't been able to track it down more than that.

I see the same thing, but it only happens in dev - when I build and run the app it works fine.

Using this repl the listeners2 issue happens both when using npm run dev and using npm run build npm run preview
#11934 (comment)

Answer 39 · 2024-06-13T16:01:01.000Z

As a temporary workaround I found wrapping the chart in an {#if} block using a flag that is set to false via beforeNavigate works to at least keep the app running, even though the error still logs to the console (without it the app is dead and I have to do a hard page refresh):

import { beforeNavigate } from '$app/navigation'

let show = $state(true)
beforeNavigate(() => show = false)

{#if show}
  <Chart> ... </Chart>
{/if}

Answer 40 · 2024-06-13T17:15:17.000Z

As a temporary workaround I found wrapping the chart in an {#if} block using a flag that is set to false via beforeNavigate works to at least keep the app running, even though the error still logs to the console (without it the app is dead and I have to do a hard page refresh):
import { beforeNavigate } from '$app/navigation'

let show = $state(true)
beforeNavigate(() => show = false)
{#if show}
  <Chart> ... </Chart>
{/if}

That is a good solution for the time being, it at least allows me to update. The app crash is, for obvious reasons, a deal breaker.

Answer 41 · 2024-06-15T19:33:50.000Z

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).

Answer 42 · 2024-06-19T18:47:56.000Z

I just updated Github Analysis and Strava Analysis apps to Svelte 5 which uses Svelte UX and LayerChart (and thus LayerCake under the hood).

I'm seeing a similar issue to @mhkeller and @CaptainCodeman in dev-only where if you navigate away from a page with a LayerChart/Cake chart, it will throw a runtime error:

TypeError: Cannot read properties of undefined (reading: 'delete')

Both of these work fine when built (github.techniq.dev and strava.techniq.dev)

Anyways, I just wanted to throw that out there and provide some repos that can be ran, although you'll need to setup a Github or Strava app (see their READMEs). The error is also slightly different than what @mhkeller reported.

Answer 43 · 2024-06-19T18:55:47.000Z

Can you check if the latest version (released a few minutes ago) fixes this?

Answer 44 · 2024-06-19T19:07:54.000Z

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.

Answer 45 · 2024-06-21T23:30:07.000Z

Threlte also throws the error of importing from "svelte/internal". I don't know if this should be commented here as of today, let me know if I should move/coment elsewhere! Thanks in advance!

Minimal reproduction error is to simply install it and use a scene, like in their "Your First Scene" page.

Importing the component alone already triggers the error

<script lang="ts">
    import { Canvas } from '@threlte/core'
</script>

<div>
:(
</div>

Answer 46 · 2024-06-22T09:50:00.000Z

There is no get_current_component or alternative in Svelte 5. This is why the private API shouldn't be used. The Threlte authors must fix this issue themselves.

Answer 47 · 2024-06-22T11:02:33.000Z

@7nik understood. thanks for clarifying!

Answer 48 · 2024-06-23T03:10:06.000Z

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

Answer 49 · 2024-07-04T11:16:28.000Z

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

Answer 50 · 2024-07-04T13:34:11.000Z

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.

Answer 51 · 2024-07-05T07:12:00.000Z

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

Answer 52 · 2024-07-24T00:23:27.000Z

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

Answer 53 · 2024-07-30T06:58:00.000Z

(This is a copy of my Discord post)

Vitest apparently doesn't get updates to derived class fields, and I'm not sure whether that's just me, or a bug. Consider a class with a $state field and a $derived field:

// classWDerivedState.svelte.js
class ClassWDerivedState {
  public state = $state(0);
  public derivedState = $derived(this.state);
}

This works in the svelte 5 REPL as expected.

However, the following vitest throws an error (precise error location indicated in the code):

// classWDerivedState.test.js
import { describe, it, expect } from "vitest";
import { ClassWDerivedState } from "./classWDerivedState.svelte";

describe("test class with derived state", () => {
  it("reactively updates its state", () => {
    const obj = new ClassWDerivedState();

    expect(obj.state).toBe(0);
    expect(obj.derivedState).toBe(0);

    obj.state++;

    expect(obj.state).toBe(1);
    expect(obj.derivedState).toBe(1); // <-- this line errors in vitest
  });
});

Steps to reproduce:

install a new svelte project with SvelteKit and select the svelte 5 and vitest options during installation
create the files shown above in the /lib folder
run vitest with a package manager of your choice ($ <package manager> test:unit)

Answer 54 · 2024-07-30T08:56:40.000Z

@Lenostatos your issue seems to be #10244

Answer 55 · 2024-07-30T13:08:18.000Z

@7nik ah perfect, thank you so much! Of course, I didn't consider including the term "unit testing" in my google searches 🙈

Answer 56 · 2024-07-30T14:43:46.000Z

In my case with svelte@5.0.0-next.202 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.

Answer 57 · 2024-07-30T14:50:27.000Z

Please open a separate issue with a reproduction for this

Answer 58 · 2024-08-01T11:11:39.000Z

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.

Answer 59 · 2024-09-06T07:46:32.000Z

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

Answer 60 · 2024-09-15T08:32:17.000Z

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.

Answer 61 · 2024-09-19T11:04:25.000Z

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

Answer 62 · 2024-09-24T16:10:35.000Z

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

Answer 63 · 2024-10-04T08:35:06.000Z

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

Answer 64 · 2024-10-09T12:02:03.000Z

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 }));

Answer 65 · 2024-10-09T12:47:50.000Z

Please open a separate issue with a proper reproduction

Answer 66 · 2024-10-09T15:05:13.000Z

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.

Answer 67 · 2024-10-09T15:10:19.000Z

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

Answer 68 · 2024-10-19T05:08:30.000Z

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);

Answer 69 · 2024-10-20T01:09:22.000Z

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

Answer 70 · 2024-10-20T03:07:15.000Z

@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.

Answer 71 · 2024-10-23T20:04:00.000Z

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

Answer 72 · 2024-10-23T20:09:42.000Z

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)

Answer 73 · 2024-10-26T08:59:26.000Z

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