162 questions
-4
votes
0
answers
48
views
Why does this code (Svelte with CSS) starts with the back of the card? [closed]
I can't find or figure out where in the code it initializes to display the card back in the beginning. Can someone advise?
https://svelte.dev/tutorial/svelte/classes
It gets weirder, the next tutorial ...
0
votes
3
answers
57
views
Cannot render a value from a Float32Array
I am trying to render an element from a Float32Array using Svelte.
let laterTimeIndex = hourlyWeatherData.time
.find((timeData: Date) =>
timeData.getHours() === (currentTime + 5) % 24
...
- 21
1
vote
1
answer
49
views
Is it possible to short-hand forward child component exports in Svelte 5?
If I have a child component, for example Dialog.svelte, which exports some const values:
<script lang="ts">
// Just to illustrate that this is a Svelte 5 component
let { title }: { ...
- 1,627
0
votes
1
answer
53
views
Is this binding_property_non_reactive really correct?
Reproduction
https://svelte.dev/playground/2c859a9c620b4b9a8422c2596df4c209?version=5.42.3
Using Svelte (v5.42.3) and Svelte Kit (v2.48.2) and @tanstack/svelte-query (v6.0.3).
If I have the component ...
- 4,273
-3
votes
0
answers
53
views
Svelte 5, context VS .svelte.js
I'm going to create a new Svelte 5 app where I will have some global state (settings, configuration values, etc.) I need to be reactive and accessible in most components. I'm thinking about two ...
- 8,412
2
votes
1
answer
71
views
Svelte 5: Typescript and rest props issue "'prop' is specified more than once"
I have component <Component> which is basically an instance of another component <Modal> (a modal used for a specific action).
For consistency and improved legibility I am passing all the ...
- 47
1
vote
0
answers
40
views
Svelte 4 Legacy Mode Component not Rendering in Svelte 5
So I'm working on an Obsidian plugin that uses Svelte 4, but has security vulnerabilities that involve upgrading to Svelte 5 to resolve.(old ESBuild in Vite) I wanted to minimize the changes to my ...
- 25
0
votes
0
answers
81
views
Nested reactivity with Svelte $derived
I'm making a swimming app and I want a button that adds an event to a swim meet. In place of a store, I'm using an object called STATE that acts as a single source of truth for the entire app.
<...
0
votes
1
answer
121
views
How to access svelte web app variables from the browser console? [closed]
I’m working with a Svelte 5 application that has already been deployed in production, and I don’t have access to its source code. I’d like to inspect or interact with some of its internal variables ...
- 46
0
votes
2
answers
72
views
$effect “forgets” state change, test crashes with “Cannot read properties of undefined”
I’m trying to write a Vitest unit test for an auto-save feature in a Svelte 5 project.
The test sets meta.settings.autoSaveIntervalMs = 50 so the save cycle finishes quickly, but the $effect still ...
- 11
-3
votes
1
answer
128
views
Vite manifest not found at: .../public/build/manifest.json but the manifest.json built in .../public/build/.vite/manifest.json
When running npm run dev that works but when I stop the npm run dev and run the npm run build then go to the web site, I get the error message:
Illuminate\Foundation\ViteManifestNotFoundException: ...
- 53
-1
votes
2
answers
147
views
Svelte 5: make property passed into sub-component derived based on $state/$derived/$props
I'm struggling a bit with some new concepts after transitioning from Svelte 3.
I have this component ParentComponent.svelte
<script lang="ts">
let selectedCell: Optional<Cell>...
- 3,528
0
votes
1
answer
188
views
Svelte error: effect_orphan `$effect` can only be used inside an effect (e.g. during component initialisation)
We are porting our svelte 3 based app to 5. It has a dynamic widget compilation system that allows end-users to create their own svelte widgets (see this post for background). Compilation seems to ...
- 14.1k
0
votes
0
answers
28
views
Agora Chat Error 28 when trying to pass accessToken to Login
I have the following cod set up in Svelte 5 attempting to log in and connect to a chat room:
const AgoraChat = (await import('agora-chat')).default;
client = new AgoraChat.connection({ appKey: appKey }...
0
votes
1
answer
24
views
Referencing elements inside a writable List
I have the following list of Player objects {id:number, name:string} which is a globally stored element made using writable:
// $lib/global.ts
import { writable } from 'svelte/store';
import type { ...
- 21
0
votes
1
answer
120
views
How to use Tween in actions?
Svelte 5 deprecated tweened and replaced it with Tween.
tweened was a store, so in an action I could subscribe to the value and react to it that way (e.g. turn an offset into a line of CSS like ...
0
votes
1
answer
92
views
Svelte-flow async integration with indexedDB
Context
I'm using Svelte-Flow with Sevelte 5 for some project. To scale I want to have the object defining my node pushed to indexedDB. To keep it in sync and don't dodata handling twice, I want to ...
- 2,497
2
votes
1
answer
272
views
Svelte 5 $state values do not update after destructuring
This REPL example shows that my destructured values are not reactive. Function getIntersectionState() returns a $state object:
const { i, detectors, refreshState } = getIntersectionState();
When I ...
- 340
1
vote
2
answers
86
views
Conditional typescript in this component
I have this Svelte 5 code:
<script lang="ts">
type BaseProps = {
required?: boolean;
};
type SingleDateProps = BaseProps & {
range?: false | undefined;
...
- 4,273
0
votes
0
answers
114
views
Why Vite does not detect my imported modules
We have a rails project that uses Vite and Svelte, recently we wanted to upgrade to Svelte 5 but we have some trouble when importing components from the app or node modules, it doesn't matter which ...
- 1,812
0
votes
1
answer
92
views
How i can manage a component that needs to use a custom event?
I’m using a custom Select component inside a table, and I want to make some reactive calculations in the parent component for example, updating the total price when a discount is selected through a ...
0
votes
1
answer
140
views
Svelte 5 binding is not binding to nested Objects
I have problems binding to nested after migrating from svelte4 to svelte5
I have a nested object that i want to manipulate in Svelte JS why do i need to create the Outer?
Link to see Svelte Playground
...
- 47
0
votes
0
answers
50
views
svelte-clerk library sign-up user does not recieve verification code
It works normal as it should when a user signs up via Google or Facebook, but when it's just email the user gets redirected to /sign-up/verify-email-address, which I have not set up and the user does ...
0
votes
0
answers
24
views
loaders on storybooks autodocs
I have some storybook components with loaders. I am using svelte CSF. Individually they load the mock data and display properly, but on autodocs they appear as if the loader never fires.
<script ...
- 839
0
votes
1
answer
56
views
.env files in production using adapter-node (pre-built application)
I am trying to deploy a sveltekit app using adapter-node using .env files.
I have a .env file with several values:
V_TEST1=TEST1
PUBLIC_V_TEST2=TEST2
I access them using import { V_TEST1 } from '$env/...
- 839
0
votes
1
answer
325
views
How to do error handling with fetch api in Svelte 5
The documentation in just says to create a +page.ts file of
import type { PageLoad } from './$types';
export const load: PageLoad = async ({ fetch, params }) => {
const res = await fetch(`/api/...
- 51
0
votes
2
answers
107
views
Reactivity and exported state-using function
App.svelte:
<script>
import Comp, {getValue} from "./Comp.svelte";
const derivedValue = $derived.by(getValue);
</script>
<Comp />
<p>
<span>App: ...
- 4,283
0
votes
1
answer
480
views
Passing children to a snippet
I have a Svelte page like this:
{#await dataPromise}
<div transition:fade onoutrostart={takeOutOfStaticFlow}>
<CustomDataLoadingProgressComponent />
</div>
{:then ...
- 4,283
3
votes
1
answer
360
views
How to mock page from $app/state in SvelteKit + Vitest unit tests?
this is my first post — I'm new to both Stack Overflow and SvelteKit. I'm trying to test a Svelte 5 Navbar component that conditionally shows links/buttons based on:
page.data.user — if the user is ...
-1
votes
1
answer
274
views
passing children's layout.ts data to parent's layout.svelte
So I have been working on the implementation of breadcrumbs feature in my sveltekit webapp.
The idea is, the breadcrumb will be rendering at the most top layout.svelte.
And then the proceeding ...
0
votes
0
answers
100
views
Returning an array from server-side to client-side in Svelte 5
I am using Svelte5. When I send an array from +page.server.js to +page.svelte it always works server-side and the array is sent as expected. However when +page.svelte is running on the client side ...
- 21
1
vote
1
answer
410
views
Declare a snippet inside a component without it being implicitly passed to the component as a prop
The Svelte tutorial demonstrates how to declare a table row snippet:
<tbody>
{#snippet monkey()}...{/snippet}
{@render monkey()}
</tbody>
So far so good. Makes sense to put a ...
- 4,283
1
vote
1
answer
116
views
How to invalidate an arbitrary cache?
I have a simple +page.ts showing the data string and providing the "Update" button:
<script lang="ts">
import { invalidateAll } from '$app/navigation';
const { data }...
- 4,283
0
votes
1
answer
62
views
Using IntersectionObserver breaks SvelteKit prerender, which results in 404 on direct urls
I have a static site that I deploy to GitHub pages (GHP). I first build it locally and then deploy the output to GHP. Which is why all the data is in JSON files that are updated and deployed when eg. ...
- 1,907
1
vote
1
answer
528
views
How to properly handle async initialization in Svelte 5 without onMount?
I'm migrating my project from Svelte 4 to Svelte 5, and one major pain point is the removal of the traditional onMount usage for async logic.
In Svelte 4, I used onMount(async () => { ... }) to ...
- 11
1
vote
0
answers
110
views
Svelte 5 snippet argument type check weird behaviour
I've had this problem for a while and haven't really found anyone with a similar issue. The Svelte 5 snippets do not accept primitive types as arguments.
.
I have the script tag marked with lang="...
- 21
1
vote
0
answers
123
views
Svelte Routing - Cannot read properties of undefined (reading 'before')
Not able to get routing to work without a bug. The route works if I click on the link twice, the second time, the correct page renders. The first a console output error is generated.
ERROR:
Uncaught ...
- 1,235
1
vote
0
answers
284
views
Svelte 5 memory leak in simple example
I'm encountering many memory leaks when using both Svelte 4 and 5 on reasonably complex projects, and having trouble identifying what I'm doing wrong.
Here is an extremely simplified Svelte 5 example (...
- 5,188
0
votes
1
answer
37
views
Why doesn't Svelte record signals individually?
I'm wondering about internals of Svelte to properly design my application to have maximum efficiency (I may deal with (tens?) of thousands of elements to update, so efficiently does matter), notably ...
- 2,594
0
votes
0
answers
111
views
Astro + Svelte: Imported Svelte Components Have No Type Checking in VSCode
I'm using VSCode, and I've noticed that when I import Svelte components into my Astro components, they are typed as any, and TypeScript does not type-check the props.
I have set up my project running:
...
- 93
0
votes
1
answer
59
views
Open-props breaks default Svelte alignment
If I scaffold a new Svelte v5 project
npm create vite@latest myapp -- --template svelte
Then import the Open-props stylesheets in the main App.svelte file
:global {
@import "https://unpkg....
- 12.7k
0
votes
2
answers
279
views
Svelte 5 Unsafe State Mutation at Tree Component
I need help with Svelte components. I've built a tree that should allow users to check nodes and update related nodes. When a node is checked, its parents and children should react accordingly. ...
0
votes
0
answers
70
views
@rollup/plugin-typescript TS2307: Cannot find module or its corresponding type declarations
main.ts file
import App from "../components/HelloWorld.svelte";
const app = new App({ target: document.body, });
export default app;
rollup.config.json file
import svelte from "...
- 21
1
vote
2
answers
289
views
How do I correctly validate svelte5 props with zod?
I'm new to svelte having previously worked in react and I ran into something that confused me when trying to use zod to ensure proper (runtime) typesafety of my svelte components.
My typical approach ...
- 4,742
0
votes
0
answers
73
views
Streaming promises crashes the entire app with ERR_UNHANDLED_REJECTION when backend is not reachable.How to handle errors on streaming promises?
Setup
I have an express backend server running on localhost:8000
My sveltekit frontend is running on localhost:5173
Problem
I shut my backend server down to see what happens on the frontend
I ...
- 6,362
-6
votes
1
answer
114
views
How to integrate Svelte in existing site [closed]
This is a successor question to How to integrate Svelte in other App Stack. The setting is the same: I've got an existing site which I'd like to extend by Svelte. The respone by @bob-fanger looked ...
- 6,484
1
vote
1
answer
188
views
Svelte onMount method does't wait for await
I have Firebase app with Svelte 5. Svelte is '5.17.5', @sveltejs/kit is '2.15.3', firebase is '11.2.0', vite is '6.0.7'. Here is method, it doesn't stop on await/async. What am I missing?
Here is ...
- 131
0
votes
0
answers
71
views
Provide a fallback icon when using @iconify/svelte for icons that may not be available in the API?
I am loading symbols dynamically from an API endpoint. I am using iconify/svelte to render icons.
My code looks like this:
<script lang="ts">
import Icon from 'iconify/svelte';
...
- 6,362
0
votes
1
answer
99
views
SvelteKit issue with header not refreshing
Given this +layout.svelte:
<div class="app">
<Header />
<main>
{@render children()}
</main>
</div>
if I do a goto in a component, the ...
- 20.7k
1
vote
1
answer
56
views
Encapsulating context interactions
The docs for the context API have this example:
import { getContext, setContext } from 'svelte';
let userKey = Symbol('user');
export function setUserContext(user: User) {
setContext(userKey, user)...
- 13