Open dummdidumm opened 6 months ago
svelte-turnstile
breaks as a result of #8301. If that issue is fixed, svelte-turnstile
will function properly.
svelte-confetti
has been fixed as of version 1.3.2
https://github.com/Mitcheljager/svelte-confetti/pull/10
svelte-range-slider-pips
breaks as tracked in https://github.com/simeydotme/svelte-range-slider-pips/issues/130
- [ ]
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 $: {}
svelte-sonner no work -> https://github.com/sveltejs/svelte/issues/10359#issuecomment-1949429550
@skeletonlabs/skeleton
lightswitch component has visual artifacts:
Work-arounds:
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?
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.
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.
@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
@dummdidumm Confirmed artifact is gone!
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
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?
https://github.com/TanStack/table/issues/5213. The svelte wrapper for TanStack Table is using svelte/internal
and thus is broken.
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
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
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.
@dummdidumm About svelte-range-slider-pips
, an issue with the slider is still present if bind:values
is used: Svelte 5 REPL • Svelte 4 REPL
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)
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.
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';
@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!
Created #11389 to track the devtools integration story
We're seeing a number of issues with Bits UI components breaking only in dev. Components like Dialog and Menubar throw the following error:
While other components like Accordion throw a different error:
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
🎉
That's #11429 which was fixed by #11438, release soon
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)
@vexkiddy seems to be working on the latest version. REPL. Version next.55 is really ancient.
brilliant! thanks @7nik :)
sveltekit-superforms
- https://github.com/ciscoheat/sveltekit-superforms/issues/426 - incompatible in rune mode for the entire app.
svelte-highlight
- incompatible in rune mode for the entire app, but there is a compatible alternative - svelte-rune-highlight
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.
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.
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>
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.
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.
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.
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.
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
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}
As a temporary workaround I found wrapping the chart in an
{#if}
block using a flag that is set to false viabeforeNavigate
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.
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
).
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.
Can you check if the latest version (released a few minutes ago) fixes this?
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.
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>
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.
@7nik understood. thanks for clarifying!
For any Threlte users coming here, there is a next
version that is compatible with Svelte 5. See this issue.
https://github.com/mattjennings/svelte-modals
breaks because this line always evaluates to true
in svelte 5:
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.
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").To investigate
svelte-turnstile
Won't / can't fix
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!Fixed
svelte-confetti
svelte-range-slider-pips
(through #10543)Reproduction
Use the libraries and observe errors
Logs
No response
System Info
Severity
annoyance