3,010 questions
1
vote
1
answer
42
views
How do I return a PDF (from PDFKit) using a SvelteKit POST handler?
I am currently working on building an application using SvelteKit, and as such am currently having a VERY difficult time figuring out why I can't trigger the client downloading a PDF (generated by ...
- 1,273
0
votes
3
answers
68
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
0
votes
1
answer
50
views
Codeblocks not rendering correctly with MDsvex
I am trying to render markdown posts fetched from a git repo in my Svelte 4 webapp/blog using mdsvex.
The markdown mostly renders correctly, but the ``` code blocks dont render corerctly.
The ...
2
votes
1
answer
56
views
Is there a way to exclude specific dates using Flowbite-Svelte's Datepicker?
I am working on a simple website, using SvelteKit. For the UI, I use Flowbite-Svelte and some of its components.
During early stages of development, I just used the availableFrom property. Now I want ...
- 23
0
votes
1
answer
69
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
1
vote
1
answer
70
views
Route fallthrough with sveltekit
I am trying to create a generic API app that heavily uses the Accept header using SvelteKit. Some example routes are:
GET /[schema] - HTML page with list of {schema} items
GET /[schema] Accept: ...
- 441
0
votes
1
answer
132
views
Correct way to use HTML Dialog native element with Svelte?
Problem
Before asking this question, I read through the MDN page for HTML dialog and saw the examples too (one that has a select with option) and the other the uses returnValue to return a value
I ...
- 6,362
1
vote
1
answer
86
views
Creating new SvelteKit project fails with "Failed to install dependencies"
I enter "npx sv create" as I have done successfully numerous times before, and choose all defaults. The usual spinner begins, but this error appears. I have rebooted, tried different clean ...
- 530
0
votes
0
answers
42
views
Sass + PurgeCSS + SvelteKit: properly hash filenames
I have some code using SvelteKit for JS, Sass (with Bootstrap) for CSS, optimized with PurgeCSS, and compiled with Vite.
Here my vite.config.js:
import { sveltekit } from '@sveltejs/kit/vite';
import {...
- 660
1
vote
1
answer
127
views
@layer base is used but no matching @tailwind base directive is present
I'm having issue with tailwindcss 4. On fresh new project when I run the app the error occurs:
C:/Users/Maxima/Desktop/System_obslugi_praktyk/src/app.css:45:1: @layer base is used but no matching @...
- 11
0
votes
2
answers
65
views
SvelteKit form inside a modal won’t submit to +page.server.js action
So I have a SvelteKit project with the following project structure:
lib/
├─ components/
│ └─ my_module/
│ └─ my_resource/
│ ├─ CreateObjectButton.svelte ← Button component (important by ...
- 532
2
votes
1
answer
61
views
how to create a function that recieves a path compatible with the resolve fn
I'm creating a component that will receive several RouteId and create links
I want to use the resolve fn to validate them
see: https://svelte.dev/docs/kit/$app-paths#resolve
If I declare a prop (or a ...
- 64.4k
1
vote
1
answer
197
views
How do you pass components as props?
Suppose I have a component:
//DynamicSearch
<script>
let { ..., quickAdd=false, quickAddForm} = $props();
</script>
// other forms
{#if quickAdd}
<quickAddForm />
{/if}
// Form
...
- 1,451
1
vote
1
answer
279
views
Tauri window opens fine on macOS but hangs with blank window on Windows (no logs after #2)
I’m developing a desktop app with Rust + Tauri (v2.5) + SvelteKit.
On macOS my command for opening a new settings window works perfectly. On Windows however, the app freezes when building the window: ...
- 568
0
votes
1
answer
50
views
SvelteKit + Superforms: Data flickers and is replaced by wrong data on page reload
I'm building a SvelteKit application where users can edit student details on a dynamic route (/student/[id]). I'm using Supabase for the database and SvelteKit Superforms to handle the form.
The ...
- 13
1
vote
0
answers
48
views
Page won't start painting until the promise is fulfilled in load function
I just started learning Svelte. Here's a small problem I encountered recently:
I’m trying to use {#await} in SvelteKit to simulate a loading state while waiting for server data.
Here’s my setup:
<!-...
- 11
0
votes
2
answers
80
views
SvelteKit 5 routing
My folders structure:
src/routes/[lang]/
├── +layout.svelte
├── +page.svelte
├── +page.server.ts
└── [category]/
├── +page.svelte
└── +page.server.ts
The problem is that if I am ...
- 11
0
votes
1
answer
108
views
Hydration failed because the initial UI does not match what was rendered on the server
"@sveltejs/kit": "^2.34.0"
I am adding a close button to the svelte shadcn Tabs component and get this error. I have seen many questions on this in other frameworks but not ...
- 2,989
0
votes
1
answer
119
views
How to move Svelte source code to directory other than "src"
I have a repo that contains both frontend and backend code of my project. The frontend is written in Svelte and resides in /frontend.
The files configuration value is deprecated in the newest Svelte ...
- 1,222
0
votes
1
answer
112
views
Error: column "displayUsername" of relation "users" does not exist in better-auth 1.3.6 and 1.3.7
I am getting the following error when I try to update a username in better-auth from a sveltekit client
# SERVER_ERROR: error: column "displayUsername" of relation "users" does ...
- 6,362
1
vote
1
answer
56
views
How to access exports of CDN module loaded in app.html?
I'm importing a module in my app.html as follows
<body data-sveltekit-preload-data="hover">
<script type='module' src='https://cdn.jsdelivr.net/npm/@owlbear-rodeo/[email protected]/+esm'...
- 1,372
0
votes
1
answer
83
views
Earliest a client-side import can be executed in SvelteKit application?
Context
I have a Svelte 5 + SvelteKit application (App A) that is loaded into an iframe within a different app (App B).
When the iframe loads, App B emits a one-time message event with id=OBR_READY.
...
- 1,372
1
vote
0
answers
76
views
How to reactively respond to form.success updates from +page.server.ts actions in +pages.svelte
I have a SvelteKit setup where I perform a fetch request inside an action in +page.server.ts. Specifically, I define an addSender action that handles a POST request to an external API and returns an ...
- 5,507
1
vote
1
answer
43
views
How to undo a refactor that altered base types in frontend framework?
I'm using Svelte 5 and TypeScript in VS Code.
I'm running into an issue where the TS language server thinks that the style attribute is not valid for a <div>, which is obviously incorrect. I'm ...
- 100
0
votes
0
answers
183
views
Cannot read properties of undefined (reading 'wrapDynamicImport'). Getting this error right after generating a new project and trying to run tests
I ran the following commands in sveltekit to create a new project
npx sv create ch_ui
I selected the following options
┌ Welcome to the Svelte CLI! (v0.8.20)
│
◇ Which template would you like?
│ ...
- 6,362
0
votes
0
answers
20
views
Svelvet edge source is undefined
<script>
import { Svelvet, Node, Edge } from 'svelvet';
// Make these reactive by declaring them with let
// let nodes = [
// {
// id: 'start',
// position: { x: 100, y: ...
- 1
0
votes
1
answer
60
views
Stackblitz and supabase - can't get .env to work
Using the sveltekit starter on stackblitz, I've installed the supabase package.
In the root directory I have a .env file with SUPABASE_URL and SUPABASE_KEY and the values are filled in.
In src/lib/...
- 304
1
vote
1
answer
109
views
Why not call a fetch function eagerly when it is not even awaited
I get this message in my terminal when running my svelte frontend:
Avoid calling fetch eagerly during server side rendering — put your fetch calls inside onMount or a load function instead
I ...
- 228
1
vote
1
answer
139
views
How to Build to a Web Component from a Svelte Library?
I'm writing a Svelte(Kit) library that currently works by importing the svelte component.
I've been requested to make it also available as a web component, i.e. something like:
<script src="...
- 33
-1
votes
3
answers
324
views
Use Wasm on Vercel Edge
I'm trying to import a .wasm file on Vercel Edge in SvelteKit. The module I'm using is @resvg/resvg-wasm.
When I try like so:
import wasmInline from '@resvg/resvg-wasm/index_bg.wasm?inline';
...
await ...
- 4,135
-3
votes
1
answer
82
views
Is this object created only once or every time I import it? [duplicate]
Since I'm having a bug that I can't figure out, a cold doubt has assailed me:.
I have the below code in a Svelte 5 SvelteKit app.
And I'm importing import { queryClient } from './src/query.ts from ...
- 4,273
0
votes
1
answer
86
views
CORS when redirecting with netlify
I have a SvelteKit project hosted on Netlify, and the idea is that if a user accesses the route mynetlifyproject.com/route, it should render content from another domain, specifically from app....
- 99
0
votes
1
answer
77
views
SvelteKit use prop for background-image [duplicate]
I am using SvelteKit and I have a component that displays a CSS background-image - see picture. I have this working with a hard-coded image but I need to vary the image from card to card.
Here is my ...
- 38
2
votes
2
answers
164
views
How to fetch on hover like SvelteKit in Next.js
I wrote a site in SvelteKit and the navigation between pages felt really fast because, SvelteKit on hover, runs the load functions of the pages, downloads everything to the client and on click, it ...
- 484
1
vote
1
answer
161
views
Is there a way for me to configure the "include" paths that get generated in SvelteKit's tsconfig.json?
My file structure is:
- src
- foo
- script.ts
- tsconfig.json
- .svelte-kit
- tsconfig.json
...
My goal is to have typescript files in /foo to be treated essentially as if they were in /src (...
- 23
2
votes
1
answer
64
views
How can I update the client with information about the state of the currently active form request in sveltekit?
I am making a web app which sends some requests to external APIs which can take some time to complete. The user types information in a form, which is received by a +page.server.ts file in the default ...
- 35
0
votes
0
answers
53
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
68
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
1
vote
1
answer
2k
views
Basic issue with Better-Auth
I'm trying to implement better-auth for a project. I've followed their great docs, but get 404 errors. Specifically, "GET http://localhost:5173/api/auth/get-session 404 (Not Found)" when I ...
- 567
0
votes
1
answer
336
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
1
vote
0
answers
104
views
Mocking components on the server side when running tests on a SvelteKit API using Vitest
I'm developing a SvelteKit application and I try to use Vitest to run some tests.
I want to test a simple API endpoint:
// src/routes/api/test/+server.ts
import { testService } from '$lib/server/...
- 8,895
0
votes
1
answer
70
views
How can I dynamically generate load functions for multiple routes in SvelteKit without repeating code?
I have multiple routes that fetch data from different API endpoints, but the structure of the fetch logic is nearly identical. I want to avoid duplicating this logic across all +page.ts files.
I tried ...
0
votes
0
answers
49
views
Sveltekit breaks CSS on refresh page for child pages
I have an issue when reloading page in dev and production mode breaks CSS. I see that first page load sets body to 60% width while after reloading it sets to 100%. It happens only in child pages.
My ...
- 99
0
votes
1
answer
274
views
Creating a halftone effect with Three.js
I'm trying to create a reverse halftone effect using Three.js, specifically with Threlte. This is my reference image:
There are a couple of layers of dots, with some rather large areas of ...
- 732
0
votes
0
answers
23
views
Getting Configuration Error in Sveltekith AuthJS for Provider Credentials
trying to implement AuthJS in Sveltekit with Twitch Provider and Credentials Provider. Twitch Provider is working.
But in Credentials where I want that the User can register with email username and ...
- 126
1
vote
1
answer
161
views
How to mock $env/static/public with vitest?
I'm using an env variable MY_VAR that I use from $env/static/public
import { MY_VAR } from '$env/static/public';
export const myVar = MY_VAR === 'true';
I'd like to mock it in some tests, to support ...
- 8,644
0
votes
1
answer
50
views
`onmouseenter` is not triggered
I have this piece of code:
<script lang="ts">
let visible = $state(false);
</script>
<div
role="button"
tabindex="0"
onmouseenter={() =>...
- 8,644
-1
votes
1
answer
298
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
106
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