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

dummdidumm commented 10 months ago

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 https://github.com/TanStack/table/issues/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 https://github.com/huntabyte/cmdk-sv/issues/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 https://github.com/vercel/ai/issues/3107

Fixed

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

Reproduction

Use the libraries and observe errors

Logs

No response

System Info

Severity

annoyance

mstachowiak commented 9 months ago

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

mstachowiak commented 9 months ago

svelte-confetti has been fixed as of version 1.3.2 https://github.com/Mitcheljager/svelte-confetti/pull/10

mquandalle commented 9 months ago

[x] svelte-range-slider-pips breaks as tracked in https://github.com/simeydotme/svelte-range-slider-pips/issues/130

simeydotme commented 9 months ago

[ ] 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 $: {}

zhihengGet commented 9 months ago

svelte-sonner no work -> https://github.com/sveltejs/svelte/issues/10359#issuecomment-1949429550

Leftium commented 9 months ago

@skeletonlabs/skeleton lightswitch component has visual artifacts:

Work-arounds:

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

dummdidumm commented 9 months ago

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 commented 9 months ago

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.

mquandalle commented 9 months ago

Just tested svelte-range-slider-pips with svelte@5.0.0-next.62 which includes https://github.com/sveltejs/svelte/pull/10543, and it's still not working, the cursor doesn't move.

dummdidumm commented 9 months ago

@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

Leftium commented 9 months ago

@dummdidumm Confirmed artifact is gone!

adriandelgado commented 9 months ago

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

ejsmith commented 9 months ago

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 commented 9 months ago

https://github.com/TanStack/table/issues/5213. The svelte wrapper for TanStack Table is using svelte/internal and thus is broken.

vexkiddy commented 9 months ago

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

jakubdonovan commented 8 months ago

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

huntabyte commented 8 months ago

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

mquandalle commented 8 months ago

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

manortec commented 8 months ago

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)

herskinduk commented 7 months ago

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.

bayaderpack commented 7 months ago

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

jacob-8 commented 7 months ago

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

dummdidumm commented 7 months ago

Created #11389 to track the devtools integration story

AdrianGonz97 commented 6 months ago

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 🎉

dummdidumm commented 6 months ago

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

vexkiddy commented 6 months ago

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)

7nik commented 6 months ago

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

vexkiddy commented 6 months ago

brilliant! thanks @7nik :)

Serator commented 6 months ago

sveltekit-superforms - https://github.com/ciscoheat/sveltekit-superforms/issues/426 - incompatible in rune mode for the entire app.

Serator commented 6 months ago

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

dummdidumm commented 6 months ago

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.

Serator commented 6 months ago

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.

pheuter commented 6 months ago

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>

Ennoriel commented 6 months ago

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.

techniq commented 6 months ago

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 (https://github.com/sveltejs/svelte/issues/11847) that was uncovered.

mhkeller commented 5 months ago

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.

Screenshot 2024-06-02 at 20 13 29

CaptainCodeman commented 5 months ago

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.

vipero07 commented 5 months ago

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 https://github.com/sveltejs/svelte/issues/11934#issuecomment-2153020997

CaptainCodeman commented 5 months ago

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}

vipero07 commented 5 months ago

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.

thenbe commented 5 months ago

Svelte wrapper for Tanstack Table, because it uses svelte/internal in a way that can't be backported https://github.com/TanStack/table/issues/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 commented 5 months ago

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.

dummdidumm commented 5 months ago

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

techniq commented 5 months ago

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

https://github.com/sveltejs/svelte/assets/177476/54afccf0-ffec-4ad1-bd27-a301484d6a0c

Have to run out the door now though.

jesi-rgb commented 5 months ago

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

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

<div>
:(
</div>

7nik commented 5 months ago

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.

jesi-rgb commented 5 months ago

@7nik understood. thanks for clarifying!

michealparks commented 5 months ago

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

olehmisar commented 4 months ago

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 commented 4 months ago

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.

sveltejs / svelte