6,142 questions
0
votes
0
answers
12
views
How to serve static files on CloudFoundry?
I have a svelte project that basically is a database of links to internal or external files represented visually as a table. Nothing uber-fancy.
So, I've read in other post on StackOverflow that I ...
- 59
0
votes
1
answer
16
views
Why am I getting this overload error in my vite.config file and how do I fix it?
My vite.config is supporting a Svelte 5 app
Use '@' to resolve ./src
Support tests like vitest (or jest if I need to change)
import { defineConfig } from 'vite';
import { sveltekit } from '@sveltejs/...
- 39.4k
0
votes
0
answers
8
views
Dynamic import of fortawesome pro icons in svelte / vite
I'm attempting to dynamically import fortawesome icons in my sveltekit project, and struggling with the proper format. This is my test:
onMount(async () => {
let icons = ['faGear', '...
- 1,835
0
votes
0
answers
28
views
Viewing my site on a mobile scales a background image differently to a desktop browser set to the phone's dimensions sveltekit
So I have a paragraph and an svg graphic (nearly a rectangle but with 'wavy' edges on the top and bottom) in my sveltekit site. I would like the SVG to stretch to fill the width of the screen and ...
- 13
0
votes
0
answers
15
views
Retrieving the scroll position when the component is removed
In svelte 5, I want to store window.scrollY before the component unmounts to be able to restore it later.
I tried console logging window.scrollY inside onDestroy, the cleanup functions of onMount and $...
0
votes
0
answers
18
views
Need advice on how to store Encrypted verifier for PKCE auth0 workflow using Svelte kit
I’m working on an authentication workflow using SvelteKit and Auth0, and I’ve encountered a challenge.
Current Workflow:
Login Endpoint:
When a user is redirected to the login endpoint, I have a +...
- 65
0
votes
1
answer
30
views
Stripe Payment Button Not Triggering on Mobile
I’m working on a SvelteKit project with Supabase and Stripe. On my pricing page, I’ve got buttons for users to pay and upgrade their plans. Everything works great on desktop when I click the button, ...
1
vote
1
answer
34
views
Nice way to load data in-time with Svelte
In Svelte, we have a very nice and beautiful way to load some data in time and render it using @const:
<script>
let a = false;
</script>
<button on:click={() => a = !a}>&...
- 41
1
vote
0
answers
21
views
Using GORM models in frontend of Wails app
I'm building a desktop app with Wails which writes to a local SQLite database.
I have the following model in my Go backend:
type FilmGroup struct {
gorm.Model
Films []FilmRoll
...
- 2,087
0
votes
0
answers
24
views
SvelteKit + Capacitor: Images and Audio Not Loading in iOS Simulator
I'm working on a SvelteKit project with Capacitor to build a mobile app. The app should display images and play audio files. Everything works fine in the browser, but when I run the app in the iOS ...
0
votes
1
answer
22
views
Svelte:window component onload not triggering
In Svelte5, why is the onload event not triggering the function foo() in src/routers/+layout.svelte?
<script>
const foo = () => console.log('foo triggered')
</script>
<svelte:...
- 220
0
votes
2
answers
90
views
+250
How can I programatically authenticate a user in Auth.js?
I have a Django application with authenticated (logged-in) users.
UPDATE: using the built-in django authentication.
I have another (Svelte) application using Auth.js (https://authjs.dev) for ...
- 27.2k
1
vote
0
answers
58
views
Unit test when there is style on the component
I'm checking out Svelte 5 and I have this simple component
<script lang="ts">
let {
name
}: {
name: string;
} = $props();
</script>
<h1>
...
- 197
0
votes
0
answers
32
views
How to make sveltekit SPA app manage routes with golang backend when entering urls in browser
With having backend built in golang, frontend built in sveltekit as an SPA, how to make sveltekit frontend manage routes make in sveltekit, while having golang handle routes for api?
For example: i ...
- 587
0
votes
1
answer
88
views
How to use a global $derived in Svelte 5?
I'm trying to create a global state with Svelte 5 and runes:
// store.svelte.ts
export const person = ({
name: '',
});
export const mrName = $derived('Mr. ' + person.name); // <-- problem!
I ...
- 7,913
0
votes
1
answer
33
views
How to data bind with pageData?
If I bind directly to data, like:
type Props = {
data: PageData;
};
let { data }: Props = $props();
<input bind:value={data.product.name} />
I get the following warning:
[svelte] ...
- 2,150
0
votes
1
answer
104
views
How to use Dynamic Components in Svelte 5 with Runes?
I have the following code:
<script lang="ts">
import type { SpaceAmenities } from "$src/spaces.d";
import {
Computer,
Plug,
Printer,
Box,
Droplet,
...
- 718
0
votes
0
answers
20
views
Applying style variable with TailwindCSS in Svelte 5
I am having confusion while applying style variable with TailwindCSS in Svelte 5.
This works:
<script lang="ts">
interface Props {
rows: number;
columns: number;
...
- 1
0
votes
1
answer
40
views
Error when importing svelte.ts into a .svelte file
I'm working on an Svelte application and trying to setup a rune "state" storage in its own separate file so it can be reused, but when trying to import on a .svelte component, I get a ...
- 370
0
votes
2
answers
60
views
Svelte5/SvelteKit2 - $page.data vs let data: LayoutData = $props() in page.svelte?
It appears to me, that the data set by the return of an outer (for example the global) layout.server.ts file is accessible in two ways by it's children and nested components:
// outer layout.server.ts
...
- 220
0
votes
1
answer
36
views
Dynamically access local data elsewhere on the server with sveltekit
On the server that my website runs off of, I have a JSON file located in /srv that updates every day with new data that I would like sveltekit to read every time the page is loaded.
//import latestVid ...
- 1
0
votes
0
answers
19
views
Svelte Replace element in each with both in:{...} and out:{...}
I have a list of elements and would like to animate when this list changes. Some items might be removed, some added, some stay the same in either the same or a different position.
My thought was that ...
- 1,609
0
votes
3
answers
45
views
Why do I need to use the "type" keyword when importing types in Svelte?
I'm coming from the React world, and I'm trying to learn Svelte 5.
Suppose I have the following file:
// types.ts
export interface Person {
name: string;
}
In React, I can import the Person ...
- 7,913
0
votes
0
answers
16
views
What is the proper way to integrate MySQL in Sveltekit?
I am struggling with integrating node-mysql2 into Sveltekit. As soon as the connection goes idle I get an 'ECONNRESET' error and my application freezes until the page is reloaded.
Below is my db.ts ...
- 188
0
votes
0
answers
28
views
API Fetch Request Works on Desktop but Not on Mobile – CORS or HTTPS Issue?
I'm building a Svelte app that fetches random quotes from an API (https://zenquotes.io/api/random). The app works perfectly on desktop browsers but fails to fetch data on mobile devices (both locally ...
0
votes
1
answer
54
views
Svelte5 and Bootstrap5
I have recently been getting into Svelte and really like it. It's my first framework with the binding stuff, and I have been enjoying just working on some personal projects with it.
However, I am ...
- 133
0
votes
1
answer
37
views
How to use an array from a JS file to a Svelte file
I have a function in a +page.js file that return { props { data } }. Data is an array. However when I try to use it in svelte with
export let data
It says that it's not an array
What should I do ?
- 11
1
vote
2
answers
39
views
Reactivity in $effect goes away if I remove a console.log()
I have a $state with an array:
let clicks = $state([])
I have an effect, which references the clicks state:
$effect(() => {
// Box selection
if (autoDetectSettings.value.mode === 'box' &...
- 7,164
0
votes
1
answer
26
views
How to implement search engine results with rich links like Login and Signup for a SvelteKit app?
I noticed that some apps display enhanced search engine results, where additional links like "Login", "Signup", "Pricing", etc., appear directly below the main link when ...
- 31
1
vote
0
answers
31
views
eslint (with types) + svelte v5 fail?
seems like something is perhaps broken using svelte v5 with eslint rules (with type checking enabled):
(start with minimal app e.g. npx sv create foo (typescript + eslint))
minimally change eslint....
- 1,165
-2
votes
1
answer
14
views
Animate height resize on container with dynamic content
I am new to svelte and I was playing with the svelte/animate and svelte/transitions modules. The main question is how to animate container height when new content is added/removed.
I was trying a few ...
- 1
0
votes
0
answers
57
views
Antivirus catches “CVE-2024-4577” vulnerability even though there is no php in my code
I have a web project with Svelte and the antivirus application throws such an error even though there is no php related code block in it. Under node_modules, there is only one php file in the “flatted”...
- 33
-1
votes
0
answers
24
views
$bindable and propagation don't seem work
I'm building a nested tree of objects. This is the structure:
ID: string;
indexes: number[];
title: string;
validated: boolean;
column: DescriptionElement[];
children: ...
0
votes
0
answers
26
views
Why are my import types not resolving correctly?
I'm using VS Code v1.95.3 on an M2 mac, running a SvelteKit TS project and I'm trying to understand why the type of my imports does not resolve correctly.
During form validation I created a Zod schema ...
- 149
1
vote
2
answers
112
views
Svelte 5 bind value is getting more complex
I migrate my progect to svelte 5 and start using the power of runes but the code is buggy because the bind is not working anymore and i had to add some extra line of code. Here and example before and ...
- 437
0
votes
0
answers
16
views
How to go to .svelte component on control + left click instead of type definition in VSCode?
I'm using a monorepo with an npm workspace used as a global library.
When using components from this library, when I control + click (on VSCode) on one of them (.svelte component) on the import, it ...
- 396
0
votes
1
answer
29
views
Why can the $state rune not handle a boolean condition ($effect needed)
I am a bit confused as to why the $state rune cannot handle a boolean condition. Why is that something that requires a separate rune, in this case $effect? In the Svelte documentation, they put an ...
- 42
0
votes
0
answers
13
views
Unit tests for async url parameters in Svelte and Jest
In Svelte onMount I'm doing following logic.
onMount(async () => {
projectId = await new URLSearchParams(window.location.search).get('p');
jobId = await new URLSearchParams(window.location....
- 555
-2
votes
1
answer
67
views
I can't create a Svelte project
Important: Before writing this message I made sure I was using version 20.18.1.
I try to create a Svelte project using CLI.
I have a problem with Node but I don't understand.
My default and use Node ...
0
votes
0
answers
16
views
How do I get my sveltekit websocket ws to work on IIS?
I am trying to get my sveltekit websocket app to run on IIS on my server running Windows server 2022. I cloned the project form this repository which uses the node ws library. After I build the ...
- 326
0
votes
0
answers
33
views
Untitled blank loading page after starting server in Svelte
I'm new to Svelte and I'm just trying to run a Svelte project that should be working just fine. I followed the instructions of the repository, installing packages with pnpm i, and then when starting ...
- 217
0
votes
2
answers
44
views
SvelteKit - Redirect after Form Submit
I have a problem with redirecting after submitting form in SvelteKit.
I have some routes that needs authentication, before rendering it I'm checking if user is authenticated.
routes
│ ├── +page....
- 1
0
votes
1
answer
15
views
KaTeX mhchem Extension Not Working in Svelte - Unable to Render \ce{} Command
I'm using KaTeX in a Svelte project to render chemical equations with the \ce{} command, but the mhchem extension isn't working. Other extensions like copytex load successfully.
<script lang="...
- 59
0
votes
1
answer
41
views
Use $derived based on current state of self
When modifying the height of a sticky header based on a threshold for the yScroll position, the animation can loop infinitely if scrolling is stopped close to the threshold, as the shrinking header ...
- 42
0
votes
1
answer
44
views
How to get value from svelte form component
I am using shadcn-svelte and it's form component. And I wanted to understand, how can I get the value entered by user on the server side. In the example below, I am trying to get the value note. As ...
- 1,771
0
votes
1
answer
58
views
Svelte 5 and Superforms: Error Submiting Value of a DatePicker Component
I'm working with Svelte 5 and using Superforms for form handling. My goal is to bind a CalendarDate object from a custom DatePicker component to a Superforms field and then convert that CalendarDate ...
- 1
0
votes
1
answer
46
views
How to Wrap Each Child with a Tag in Svelte 5?
In Svelte 5, how can I wrap each child with a tag like the example below?
{#if children}
{#each children as child}
<button
=> {
handleClick();
}}
>
...
- 13
0
votes
1
answer
55
views
Why is my rune that holds an array, not being reactive?
In a separate .svelte.js file I have
export let allQuestionsRune = $state([new ObjectWithStringProperty("hi")])
Then in a button onClick method in some +page file I am doing
...
- 13
0
votes
1
answer
37
views
SvelteKit routing not working ('/src/routes/about/+page.svelte' not mapped to '/about')
I'm very new to sveltkit. Just followed supabase-svelte app refered to this link. The supabased examples work good as it says.
Now I tried another things like routing reffering the official doc. It ...
- 1,433
1
vote
1
answer
102
views
Svelte 5 dynamic component loading: TypeScript errors
In my Svelte 4 app I dynamically load components, all of which have different props. Very simple reproduction (also available on the Svelte Playground):
// App.svelte
<script lang="ts">...
- 5,808