SvelteReference

Runtime errors

Client errors

async_derived_orphan

Cannot create a `$derived(...)` with an `await` expression outside of an effect tree

In Svelte there are two types of reaction —$derived and$effect. Deriveds can be created anywhere, because they runlazily and can begarbage collected if nothing references them. Effects, by contrast, keep running eagerly whenever their dependencies change, until they are destroyed.

Because of this, effects can only be created inside other effects (oreffect roots, such as the one that is created when you first mount a component) so that Svelte knows when to destroy them.

Some sleight of hand occurs when a derived contains anawait expression: Since waiting until we read{await getPromise()} to callgetPromise would be too late, we use an effect to instead call it proactively, notifying Svelte when the value is available. But since we’re using an effect, we can only create asynchronous deriveds inside another effect.

bind_invalid_checkbox_value

Using `bind:value` together with a checkbox input is not allowed. Use `bind:checked` instead

bind_invalid_export

Component %component% has an export named `%key%` that a consumer component is trying to access using `bind:%key%`, which is disallowed. Instead, use `bind:this` (e.g. `<%name% bind:this={component} />`) and then access the property on the bound component instance (e.g. `component.%key%`)

bind_not_bindable

A component is attempting to bind to a non-bindable property `%key%` belonging to %component% (i.e. `<%name% bind:%key%={...}>`). To mark a property as bindable: `let { %key% = $bindable() } = $props()`

component_api_changed

Calling `%method%` on a component instance (of %component%) is no longer valid in Svelte 5

See themigration guide for more information.

component_api_invalid_new

Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working.

See themigration guide for more information.

derived_references_self

A derived value cannot reference itself recursively

each_key_duplicate

Keyed each block has duplicate key at indexes %a% and %b%

Keyed each block has duplicate key `%value%` at indexes %a% and %b%

effect_in_teardown

`%rune%` cannot be used inside an effect cleanup function

effect_in_unowned_derived

Effect cannot be created inside a `$derived` value that was not itself created inside an effect

effect_orphan

`%rune%` can only be used inside an effect (e.g. during component initialisation)

effect_pending_outside_reaction

`$effect.pending()` can only be called inside an effect or derived

effect_update_depth_exceeded

Maximum update depth exceeded. This typically indicates that an effect reads and writes the same piece of state

If an effect updates some state that it also depends on, it will re-run, potentially in a loop:

letletcount:numbercount=function$state<0>(initial:0):0(+1overload)namespace$stateDeclares reactive state.
Example:
letcount=$state(0);
https://svelte.dev/docs/svelte/$state
@paraminitial The initial value$state(0);function$effect(fn:()=>void|(()=>void)):voidnamespace$effectRuns code when a component is mounted to the DOM, and then whenever its dependencies change, i.e.$state or$derived values.The timing of the execution is after the DOM has been updated.
Example:
$effect(()=>console.log('The count is now '+count));
If you return a function from the effect, it will be called right before the effect is run again, or when the component is unmounted.
Does not run during server side rendering.
https://svelte.dev/docs/svelte/$effect
@paramfn The function to execute$effect(()=>{// this both reads and writes `count`,// so will run in an infinite loopletcount:numbercount+=1;});

(Svelte intervenes before this can crash your browser tab.)

The same applies to array mutations, since these both read and write to the array:

letletarray:string[]array=function$state<string[]>(initial:string[]):string[] (+1overload)namespace$stateDeclares reactive state.
Example:
letcount=$state(0);
https://svelte.dev/docs/svelte/$state
@paraminitial The initial value$state(['hello']);function$effect(fn:()=>void|(()=>void)):voidnamespace$effectRuns code when a component is mounted to the DOM, and then whenever its dependencies change, i.e.$state or$derived values.The timing of the execution is after the DOM has been updated.
Example:
$effect(()=>console.log('The count is now '+count));
If you return a function from the effect, it will be called right before the effect is run again, or when the component is unmounted.
Does not run during server side rendering.
https://svelte.dev/docs/svelte/$effect
@paramfn The function to execute$effect(()=>{letarray:string[]array.Array<string>.push(...items: string[]): numberAppends new elements to the end of an array, and returns the new length of the array.
@paramitems New elements to add to the array.push('goodbye');});

Note that it’s fine for an effect to re-run itself as long as it ‘settles’:

function$effect(fn:()=>void|(()=>void)):voidnamespace$effectRuns code when a component is mounted to the DOM, and then whenever its dependencies change, i.e.$state or$derived values.The timing of the execution is after the DOM has been updated.
Example:
$effect(()=>console.log('The count is now '+count));
If you return a function from the effect, it will be called right before the effect is run again, or when the component is unmounted.
Does not run during server side rendering.
https://svelte.dev/docs/svelte/$effect
@paramfn The function to execute$effect(()=>{// this is okay, because sorting an already-sorted array// won't result in a mutationletarray:string[]array.Array<string>.sort(compareFn?:((a:string,b:string)=>number)|undefined): string[]Sorts an array in place.This method mutates the array and returns a reference to the same array.
@paramcompareFn Function used to determine the order of the elements. It is expected to returna negative value if the first argument is less than the second argument, zero if they're equal, and a positivevalue otherwise. If omitted, the elements are sorted in ascending, UTF-16 code unit order.ts [11,2,22,1].sort((a, b) => a - b)sort();});

Often when encountering this issue, the value in question shouldn’t be state (for example, if you are pushing to alogs array in an effect, makelogs a normal array rather than$state([])). In the rare cases where you reallydo need to write to state in an effect —which you should avoid — you can read the state withuntrack to avoid adding it as a dependency.

flush_sync_in_effect

Cannot use `flushSync` inside an effect

TheflushSync() function can be used to flush any pending effects synchronously. It cannot be used if effects are currently being flushed — in other words, you can call it after a state change butnot inside an effect.

This restriction only applies when using theexperimental.async option, which will be active by default in Svelte 6.

get_abort_signal_outside_reaction

`getAbortSignal()` can only be called inside an effect or derived

hydration_failed

Failed to hydrate the application

invalid_snippet

Could not `{@render}` snippet due to the expression being `null` or `undefined`. Consider using optional chaining `{@render snippet?.()}`

lifecycle_legacy_only

`%name%(...)` cannot be used in runes mode

props_invalid_value

Cannot do `bind:%key%={undefined}` when `%key%` has a fallback value

props_rest_readonly

Rest element properties of `$props()` such as `%property%` are readonly

rune_outside_svelte

The `%rune%` rune is only available inside `.svelte` and `.svelte.js/ts` files

set_context_after_init

`setContext` must be called when a component first initializes, not in a subsequent effect or after an `await` expression

This restriction only applies when using theexperimental.async option, which will be active by default in Svelte 6.

state_descriptors_fixed

Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`.

state_prototype_fixed

Cannot set prototype of `$state` object

state_unsafe_mutation

Updating state inside `$derived(...)`, `$inspect(...)` or a template expression is forbidden. If the value should not be reactive, declare it without `$state`

This error occurs when state is updated while evaluating a$derived. You might encounter it while trying to ‘derive’ two pieces of state in one go:

<script>letcount=$state(0);leteven=$state(true);letodd=$derived.by(()=>{even=count%2===0;return!even;});</script><buttononclick={()=>count++}>{count}</button><p>{count} is even: {even}</p><p>{count} is odd: {odd}</p>

This is forbidden because it introduces instability: if<p>{count} is even: {even}</p> is updated beforeodd is recalculated,even will be stale. In most cases the solution is to make everything derived:

letleteven:booleaneven=function$derived<boolean>(expression:boolean):booleannamespace$derivedDeclares derived state, i.e. one that depends on other state variables.The expression inside$derived(...) should be free of side-effects.
Example:
letdouble=$derived(count*2);
https://svelte.dev/docs/svelte/$derived
@paramexpression The derived state expression$derived(letcount:numbercount%2===0);letletodd:booleanodd=function$derived<boolean>(expression:boolean):booleannamespace$derivedDeclares derived state, i.e. one that depends on other state variables.The expression inside$derived(...) should be free of side-effects.
Example:
letdouble=$derived(count*2);
https://svelte.dev/docs/svelte/$derived
@paramexpression The derived state expression$derived(!leteven:booleaneven);

If side-effects are unavoidable, use$effect instead.

svelte_boundary_reset_onerror

A `<svelte:boundary>` `reset` function cannot be called while an error is still being handled

If a<svelte:boundary> has anonerror function, it must not call the providedreset function synchronously since the boundary is still in a broken state. Typically,reset() is called later, once the error has been resolved.

If it’s possible to resolve the error inside theonerror callback, you must at least wait for the boundary to settle before callingreset(), for example usingtick:

<svelte:boundaryonerror={async(error,reset)=>{fixTheError();awaittick();reset();}}></svelte:boundary>

Server errors

lifecycle_function_unavailable

`%name%(...)` is not available on the server

Certain methods such asmount cannot be invoked while running in a server context. Avoid calling them eagerly, i.e. not during render.

Shared errors

await_outside_boundary

Cannot await outside a `<svelte:boundary>` with a `pending` snippet

Theawait keyword can only appear in a$derived(...) or template expression, or at the top level of a component’s<script> block, if it is inside a<svelte:boundary> that has apending snippet:

<svelte:boundary><p>{awaitgetData()}</p>{#snippetpending()}<p>loading...</p>{/snippet}</svelte:boundary>

This restriction may be lifted in a future version of Svelte.

invalid_default_snippet

Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead

This error would be thrown in a setup like this:

Parent

<List{items}let:entry><span>{entry}</span></List>

List

<script>let{ items,children }=$props();</script><ul>{#eachitemsasitem}<li>{@renderchildren(item)}</li>{/each}</ul>

<scriptlang="ts">let{ items,children }=$props();</script><ul>{#eachitemsasitem}<li>{@renderchildren(item)}</li>{/each}</ul>

Here,List.svelte is using{@render children(item) which means it expectsParent.svelte to use snippets. Instead,Parent.svelte uses the deprecatedlet: directive. This combination of APIs is incompatible, hence the error.

invalid_snippet_arguments

A snippet function was passed invalid arguments. Snippets should only be instantiated via `{@render ...}`

lifecycle_outside_component

`%name%(...)` can only be used during component initialisation

Certain lifecycle methods can only be used during component initialisation. To fix this, make sure you’re invoking the method inside thetop level of the instance script of your component.

<script>import{ onMount }from'svelte';functionhandleClick() {// This is wrongonMount(()=>{})}// This is correctonMount(()=>{})</script><buttononclick={handleClick}>click me</button>

snippet_without_render_tag

Attempted to render a snippet without a `{@render}` block. This would cause the snippet code to be stringified instead of its content being rendered to the DOM. To fix this, change `{snippet}` to `{@render snippet()}`.

A component throwing this error will look something like this (children is not being rendered):

<script>let{ children }=$props();</script>{children}

...or like this (a parent component is passing a snippet where a non-snippet value is expected):