Posts tagged "Sveltekit"

SvelteKit 3 is out today, and it just works on Netlify on day one. To upgrade, run:

npx sv migrate sveltekit-3

The migration tool handles most of the mechanical changes for you, including moving your config and updating imports. You can also check out the official migration guide.

What’s new

Some highlights include:

• Vite 8 — SvelteKit 3 requires Vite 8, bringing faster builds powered by Rolldown.
• Config lives in vite.config.ts — SvelteKit configuration moves out of svelte.config.js and into your Vite config, so Vite plugins can read it right away.
• Explicit environment variables are stable — Declare the environment variables your app depends on in src/env.ts, and specify whether each one is public and whether it’s resolved at build time or when the app boots. You get validation and type safety out of the box.
• $lib is now #lib — The $lib alias is replaced by #lib, using Node’s subpath imports. Imports need to be unambiguous, so write #lib/foo.ts or #lib/foo/index.ts.
• Shallow routing is built into goto — Use goto() with shallow: true instead of pushState and replaceState.
• Consistent error handling — All errors, including ones you throw with error(...), now go through your handleError hook.
• New service worker modules — $service-worker is replaced by imports from $app/env, $app/paths, and $app/manifest, with better type checking in service workers.
• Tracing is stable — Tracing support has moved out of the experimental namespace.

Check the full migration guide for all the details.

Watch out for the #lib alias

Nearly every SvelteKit project imports from $lib, so this is the change you’re most likely to run into. The migration tool rewrites these imports for you, but because #lib relies on Node’s subpath imports, directory imports without an explicit file no longer resolve:

// Before
import { formatDate } from '$lib/utils';

// After
import { formatDate } from '#lib/utils/index.ts';

If a build fails after upgrading with a module resolution error, look for #lib imports that point to a directory or leave off the file extension.

Deploy a SvelteKit 3 site on Netlify

If you want to get started with a new site, start with the SvelteKit on Netlify doc, or just click this button: