Questions tagged [sveltekit]
[SvelteKit](https://kit.svelte.dev/) is a framework for building fullstack web applications with the Svelte framework.
2,768
questions
55
votes
4
answers
52k
views
How to route programmatically in SvelteKit?
I want to be able manage history of my SvelteKit app while simultaneously making sure the whole routing system of SvelteKit doesn't get affected in any way.
Something like:
function routeToPage(route: ...
- 1,917
44
votes
4
answers
65k
views
npm run dev --host network: not exposed
I want to expose my svelte app on LAN using the npm run dev --host command but it shows:
> [email protected] dev
> svelte-kit dev
SvelteKit v1.0.0-next.295
local: http://localhost:3000
...
- 607
34
votes
4
answers
47k
views
How do get query string parameter in sveltekit?
I'm trying to the /login?ref=/some/path parameter to redirect to after login:
const ref = $page.url.searchParams.get('ref') || '/dashboard';
However I get this error:
TypeError: Cannot read ...
- 74.2k
34
votes
4
answers
44k
views
SvelteKit: how do I do slug-based dynamic routing?
I am a newbie on Svelte and in coding in general. I'd prefer to learn SvelteKit (Svelte@Next) rather than sapper since that seems to be where Svelte is heading.
For my personal project, I need to ...
- 351
33
votes
4
answers
40k
views
Where to put images with SvelteKit
I have been using Svelte for a little while and now I have switched to SvelteKit so I can add multiple pages. I want to add some images to my site but I don't know where to put them. In Svelte I would ...
- 945
30
votes
6
answers
17k
views
Cross-site POST form submissions are forbidden
My sveltekit app has a form which sends a POST request to server. The app is working fine on dev server but when I build and run the app it fails to send the form data via POST request. It shows the ...
- 360
27
votes
2
answers
21k
views
How to add a custom 404 page and a different Error page (for other errors) in SvelteKit?
Basically, how to do the ff. in SvelteKit:
Add a custom 404 page first.
Have a different generic Error page that will show a message/description about the error in SvelteKit
- 2,376
27
votes
2
answers
10k
views
SvelteKit, import type LayoutServerLoad/PageLoad
In layout.server.ts I try to
import type { LayoutServerLoad } from './$types';
but the type can't be found:
'"./$types"' has no exported member named 'LayoutServerLoad'. Did you mean '...
- 635
27
votes
2
answers
22k
views
SSR explained in SvelteKit
I recently started working with Svelte via SvelteKit and I have a few questions about this framework to which I haven't been able to find any direct answers in the source/documentation:
SvelteKit has ...
- 281
26
votes
3
answers
22k
views
cannot find package sveltejs/adapter-auto svelte.config.js
I am new to SvelteKit and have built an initial project from the SvelteKit docs. When the project opens I receive the following error when looking at index.svelte.
Error in svelte.config.js
Error [...
- 3,243
26
votes
2
answers
13k
views
How to change page title dynamically in Sveltekit?
I'm learning SvelteKit and this might be a very elementary question. But I could not figure out how to change the tab's title.
In my src/+layout.svelte I have:
<script>
let title=&...
- 949
24
votes
3
answers
50k
views
How to redirect to page in SvelteKit?
I have a page with content rendered from a SvelteKit store. If the store is invalid, a user needs do be redirected to the homepage. Unfortunately, I can't find a way to redirect a user even without ...
- 340
24
votes
1
answer
5k
views
config.kit.adapter should be an object with an "adapt" method
I want to use the @sveltejs/adapter-static in my Svelte Kit app (want to turn it into an SPA).
I installed the adapter static with npm i @sveltejs/adapter-static.
The code in the svelte.config.cjs ...
- 476
24
votes
1
answer
6k
views
SvelteKit: How to output build as single HTML file with inlined JS and CSS?
Is it possible to build a SvelteKit project to a single output HTML file which inlines all JS and CSS? Could SvelteKit be configured to support this output format or do I need to use an external build ...
- 365
22
votes
3
answers
25k
views
SvelteKit: disable SSR
I made an app in Svelte and now I wanted to port it to SvelteKit. My app uses window and document objects, but those aren't available in SSR. Firstly, it threw ReferenceError: window is not defined, ...
- 428
22
votes
2
answers
10k
views
Sveltekit + Typescript: Environment variables build error
I want to use environment variables in my Sveltekit app - it works fine on dev server, but I get this build error:
Error: 'PUBLIC_KEY' is not exported by $env/static/public, imported by src/routes/+...
- 1,502
20
votes
3
answers
25k
views
visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event
A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.svelte (a11y-click-events-have-key-events)
what does this error ...
- 742
18
votes
5
answers
24k
views
How to update the page and query parameters in SvelteKit?
I have a page with a search field. If accessed with a query parameter (e.g. ?word=cat) the page should load with results present and the search field filled. If a search is done the results and the ...
- 1,486
18
votes
2
answers
12k
views
Unable to access request.body from the endpoint.js in sveltekit skeleton project
After initiating a skeleton project from sveltekit app. my index has a form :
<script>
let name
let password
async function submitit(){
// console.log("name is :", ...
- 1,173
17
votes
2
answers
13k
views
How can I tell whether SvelteKit's "load" function is running on the server vs. client?
I'm trying to do API calls in a SvelteKit page from the load function, but I don't want to proxy these calls with local endpoints because I want to keep the web server as light as possible.
What I ...
- 27.4k
17
votes
1
answer
10k
views
SvelteKit loading indicator when a page load time threshold is exceeded
I am using SvelteKit for a website that is mainly server-side rendered pages. The client-side navigation on SvelteKit works beautifully and is super snappy. However, sometimes, when the backend server ...
- 82.6k
17
votes
3
answers
15k
views
Building svelte app as a set of static files
I want to use Svelte in my next project, due to its clean syntax and how nice is to work in it. Unfortunately, to deploy the app in my company I can't use node or anything like that on the server. I ...
- 3,267
16
votes
1
answer
8k
views
How to extend Locals interface in SvelteKit
The Svelte documentation shows how to set an element on locals in hooks: https://kit.svelte.dev/docs/hooks#server-hooks
event.locals.user = await getUserInformation(event.cookies.get('sessionid'));
...
- 1,468
16
votes
4
answers
18k
views
Going back to the previous page with 'goto' / Sveltekit navigation
I normally use the following to redirect to any page without using window.location.href in Sveltekit
import { goto } from '$app/navigation';
const goSomeWhere = () :void => {
goto('/')
}
But ...
- 684
15
votes
3
answers
12k
views
SvelteKit console error "window is not defined" when i import library
I would like to import apexChart library which using "window" property, and i get error in console.
[vite] Error when evaluating SSR module /src/routes/prehled.svelte:
ReferenceError: window ...
- 361
15
votes
1
answer
7k
views
Setup SSG and Prerender in SvelteKit
I just got started with SvelteKit and read the documentation. I would like to use SSG in my app and prerender every page. I configured my app as the documentation said but nothing seems to work as ...
- 311
14
votes
1
answer
7k
views
How can I send secure API requests from SvelteKit app, without showing API keys on the client side?
I'm using Supabase for a new Sveltekit app, with this template
Currently, I'm passing the Supabase keys through on the client side, like this:
const supabase = createClient(
import.meta.env....
- 327
14
votes
5
answers
7k
views
How to execute code on SvelteKit app start up
I have a SvelteKit based application in development. On the server startup, be it on a development server boot up, Node.js adapter boot up I would like to execute some diagnostics commands. An example ...
- 82.6k
14
votes
1
answer
13k
views
How do I disable minification when running "build" command in sveltekit?
I am deploying sveltekit to a dfinity container and I need to disable minification to debug.
I have to build a static version to deploy it with npm run build -- is there a vite option to disable ...
- 74.2k
14
votes
1
answer
8k
views
What do %svelte.head% and %svelte.body% represent?
Absolute noob to Svelte workflows, but it's been strongly recommended by people I respect and I want to get to grips with it.
Kind of pretty clear so far, but when I worked through the SvelteKit setup ...
- 161
13
votes
1
answer
11k
views
SvelteKit - load() not called from component but works as a Page
If the file test.svelte below is a Page in /routes, it successfully calls load() and populates the template with the JSON array it retrieves when I access it via http://localhost:3000/test. If I move ...
- 1,467
13
votes
3
answers
5k
views
how to use tailwinds @apply with @layer directive from a Svelte component
I want to use apply to define some css setting on a component, and I also want to be able to overwrite it, like this:
<!-- CustomButton.svelte -->
<script>
let className = '';
...
- 61.8k
12
votes
5
answers
20k
views
Cannot find module [...] or its corresponding type declarations (js2307) when importing from "$lib" with SvelteKit
Using the latest SvelteKit (1.0.0-next.401) I have a problem importing components from lib using the $lib syntax. I get an error and a red squiggly line (even though the import and web app works fine)....
- 511
12
votes
4
answers
10k
views
How to Fetch Data inside SvelteKit Component that Is Not a Page
SvelteKit v1.0.0-next.324
I have a SvelteKit component that is used in multiple places in my app, and it needs to fetch its own data from one of my endpoints.
I read this question that states I can't ...
- 13.6k
12
votes
1
answer
4k
views
Sveltekit and SSR
I need a bit of help understanding SSR in the context of sveltekit. I noticed that the load method is called both on the server and the client and I cannot wrap my head around this. I guess it is ...
- 16.6k
12
votes
1
answer
1k
views
Sveltekit and shared state - can someone give a concrete example of when to use event.locals vs. $page.data?
The official SvelteKit docs have this little blurb regarding shared state:
In many server environments, a single instance of your app will serve multiple users. For that reason, per-request state ...
- 6,002
12
votes
2
answers
9k
views
Pass variable up from page to svelte layout via slot
So I can't figure a way to pass a variable up in my __layout variable from the component displayed in the <slot>.
I tried a few things, using bind: or let: on the slot but it doesn't work. I ...
- 1,124
12
votes
0
answers
4k
views
How do you attach the VS Code debugger to a running Sveltekit typescript process?
How do you attach the VS Code debugger in a fresh Sveltekit project?
I have created a repository here.
The launch.json file looks like this:
{
"version": "0.2.0",
"...
- 3,285
11
votes
6
answers
12k
views
Sveltekit: Styling active links with $page.path
I'm working on a sveltekit app with a sidenav containing links. I can't get the active class styling on my links to work properly.
The links are components in NavLink.svelte:
<script>
import { ...
- 303
11
votes
4
answers
5k
views
SvelteKit page data doesn't always update when opening new page in the same dynamic route
I have a route structure /items/[category]. When the user is browsing /items/category1 and then tries to go to a another page in the same route (eg. /items/category2) the page data usually updates to ...
- 172
11
votes
2
answers
4k
views
How to not reset the form on submit with `use:enhance` in Svelte?
I have a form that updates a product's information using a form with use:enhance and actions defined in +page.server.ts - However, whenever I submit the form, use:enhance resets the form elements and ...
- 528
11
votes
2
answers
11k
views
SvelteKit - How to make SCSS variables/mixins globally available to all components?
In Nuxt, I use the Style Resources package to make SCSS available globally and I can access variables and mixins in any component. How to do the same in SvelteKit?
- 159
11
votes
2
answers
11k
views
How to access websocket in svelte?
<script>
const socket = new WebSocket("ws://localhost:8000/chat")
socket.addEventListener("open", ()=> {
console.log("Opened")
})
</...
- 143
10
votes
2
answers
11k
views
Reading the body of a request in hooks.server in sveltekit
I want to read the body of a request in my hooks.server.ts
import type { Handle } from '@sveltejs/kit';
export const handle = (async ({ event, resolve }) => {
console.log(event.request.body);
...
- 2,645
10
votes
7
answers
15k
views
Tailwind and Vite warnings: "didn't resolve at build time, it will remain unchanged to be resolved at runtime"
I'm using the following combination of technologies:
SvelteKit (1.5.0, using TypeScript), with Vite (4.0.0) as the build tool that comes with SvelteKit)
Svelte's adapter-static (2.0.1) for publishing ...
- 62.2k
10
votes
3
answers
3k
views
Getting the raw body of a request to a SvelteKit endpoint
I have an endpoint in my SvelteKit app which handles webhook requests from Stripe. Each request is signed so that it can be verified to come from Stripe.
The code I have to verify the event is from ...
- 101
10
votes
1
answer
4k
views
What are the differences between throw error and return fail in SvelteKit?
When using Sveltekit and there are issues on endpoints and form action handlers (+page.server.ts and +server.ts) when should throw error and when should return fail be used? For fail:
return fail( ...
- 2,800
10
votes
2
answers
15k
views
SvelteKit Navigation goto State
In SvelteKit navigation goto allows to pass state in the second argument such as:
import { goto } from '$app/navigation';
// ...
goto('/login', { state: { foo: 'bar' } });
The documents do not make ...
- 38.2k
10
votes
2
answers
3k
views
registering socket IO to vite for sveltekit
I have written a few apps using svelte and sapper and thought I would give sveltekit a go.
All in all it works, but I am now running into the issue of registering a worker on ther server.
Basically I ...
- 2,779
10
votes
2
answers
4k
views
Setting static asset cache TTL in SvelteKit
I am serving font and CSS files from /static using the default SvelteKit application template. I am using SvelteKit Node.js adapter.
The default cache time-to-live (TTL) seems to be 4 hours for /...
- 82.6k