sveltekit-2

SvelteKit 2

This project uses the newer SvelteKit 2 instead of the older, but more common SvelteKit 1.

Using SvelteKit version 2 instead of version 1 is mostly seamless. There are a few breaking changes to note, which are listed here.

redirect and error are no longer thrown by you

Previously, you had to throw the values returned from error(...) and redirect(...) yourself. In SvelteKit 2 this is no longer the case — calling the functions is sufficient.

Old, SvelteKit 1 syntax:

import { error } from '@sveltejs/kit'

// ...
throw error(500, 'something went wrong');

New, SvelteKit 2 syntax:

import { error } from '@sveltejs/kit'

// ...
error(500, 'something went wrong');

Do not use error or redirect inside a try {...} block.

path is required when setting cookies

When receiving a Set-Cookie header that doesn't specify a path, browsers will set the cookie path to the parent of the resource in question. This behaviour isn't particularly helpful or intuitive, and frequently results in bugs because the developer expected the cookie to apply to the domain as a whole.

As of SvelteKit 2.0, you need to set a path when calling cookies.set(...), cookies.delete(...) or cookies.serialize(...) so that there's no ambiguity. Most of the time, you probably want to use path: '/', but you can set it to whatever you like, including relative paths — '' means 'the current path', '.' means 'the current directory'.

Old, SvelteKit 1 syntax:

/** @type {import('./$types').PageServerLoad} */
export function load({ cookies }) {
	cookies.set(name, value);
	return { response }
}

New, SvelteKit 2 syntax:

/** @type {import('./$types').PageServerLoad} */
export function load({ cookies }) {
	cookies.set(name, value, { path: '/' });
	return { response }
}

Top-level promises are no longer awaited

In SvelteKit version 1, if the top-level properties of the object returned from a load function were promises, they were automatically awaited. With the introduction of streaming this behavior became a bit awkward as it forces you to nest your streamed data one level deep.