svelte Errors
20 error patterns
Component not valid for SSR rendering
is not a valid SSR component
- •Add export default to the component or check the import path
- •Ensure the component doesn't use browser APIs at top level
Svelte $ reactive syntax error
\$.*is not defined|\$state.*not allowed
- •Ensure $ reactive declarations are at the top level of a .svelte file
- •In Svelte 5, use $state() rune inside .svelte.ts files only with proper config
Lifecycle function called outside component initialization
lifecycle.*can only be.*during.*initialisation|onMount.*outside component
- •Call onMount/onDestroy at the top level of the component script, not in callbacks
- •Move lifecycle calls out of async functions or setTimeout
SvelteKit load function failure
load function.*error|\+page\.ts.*failed|load.*returned.*undefined
- •Ensure load function returns an object (even empty {})
- •Handle fetch errors with try/catch and return error() from @sveltejs/kit
SvelteKit adapter configuration error
adapter.*not found|Could not resolve adapter|@sveltejs\/adapter
- •Install the adapter package: npm install -D @sveltejs/adapter-auto
- •Check svelte.config.js adapter import path matches installed package
Svelte store subscribe error
store.*subscribe.*not a function|Readable.*writable.*undefined
- •Ensure the store is created with writable() or readable() from svelte/store
- •Check that auto-subscription ($store) is used in .svelte files only
SvelteKit API route method error
\+server\.ts.*method not allowed|endpoint.*not found
- •Export named functions matching HTTP methods: GET, POST, PUT, DELETE
- •Check file is named +server.ts (not +page.server.ts) for API routes
Vite/SvelteKit module resolution error
Cannot use.*import\.meta.*outside.*module|Vite.*pre-bundling.*svelte
- •Add the package to optimizeDeps.include in vite.config.ts
- •Check that the dependency provides ESM exports
SvelteKit hydration mismatch
hydrat.*mismatch|server.*client.*differ|text content does not match
- •Move browser-dependent rendering into onMount() with a mounted flag
- •Don't use Math.random() or Date.now() during SSR — seed or defer
SvelteKit form actions error
form action.*not found|enhance.*error|use:enhance.*failed
- •Ensure +page.server.ts exports named actions: export const actions = { default: ... }
- •Check that form method is POST and action attribute matches the action name
Svelte transition or animation error
transition.*error|animate.*FLIP.*failed
- •Ensure elements with transitions are not inside {#each} without a key
- •Add a unique key to each block items: {#each items as item (item.id)}
Svelte slot rendering error
slot.*not expected|$$slots.*undefined
- •Define <slot> in the child component where content should render
- •Use named slots with slot='name' attribute on parent content
Svelte context API called outside initialization
getContext.*must be called during.*initialization|setContext.*error
- •Call getContext/setContext at the top level of the component script
- •Don't call context functions inside event handlers or async callbacks
SvelteKit hooks.server.ts error
hooks\.server.*error|handle.*sequence.*failed
- •Ensure handle function returns a Response via resolve(event)
- •Check that sequence() receives valid handle functions
SvelteKit $page store access error
Cannot read.*\$page|page\.data.*undefined
- •Import page from '$app/stores': import { page } from '$app/stores'
- •Access data via $page.data in .svelte files (auto-subscription)
Svelte binding on non-writable value
bind:.*Cannot bind to.*not writable|binding.*readonly
- •Only bind to writable variables (let declarations or writable stores)
- •Use on:input event handler instead of bind:value for derived values
SvelteKit prerender failure
prerender.*error|Page.*failed to prerender|entries.*not found
- •Add export const prerender = false to pages that can't be prerendered
- •Provide entries() function in +page.ts for dynamic routes during prerender
Svelte 5 runes compilation error
\$effect.*not allowed|\$derived.*invalid|rune.*compilation error
- •Ensure you're using Svelte 5+ and the file extension is .svelte or .svelte.ts
- •Check that runes mode is enabled in svelte.config.js if using mixed mode
SvelteKit navigation function misuse
goto.*not available.*server|redirect.*must be thrown
- •Use throw redirect(303, '/path') in server load functions instead of goto()
- •goto() is client-only — use it in event handlers or onMount, not in load()
SvelteKit environment variable access error
env.*not available.*client|\$env\/static\/private.*cannot.*import
- •Use $env/static/public for client-accessible env vars (must be prefixed PUBLIC_)
- •Server-only env vars from $env/static/private can only be imported in server files