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 run lazily and can be garbage 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 (or effect 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 an await expression: Since waiting until we read {await getPromise()} to call getPromise 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 the migration 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 the migration 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:

let let count: numbercount = function $state<0>(initial: 0): 0 (+1 overload)
namespace $stateDeclares reactive state.
Example:
let count = $state(0);
https://svelte.dev/docs/svelte/$state
@paraminitial The initial value$state(0);

function $effect(fn: () => void | (() => void)): void
namespace $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 loop
	let count: 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:

let let array: string[]array = function $state<string[]>(initial: string[]): string[] (+1 overload)
namespace $stateDeclares reactive state.
Example:
let count = $state(0);
https://svelte.dev/docs/svelte/$state
@paraminitial The initial value$state(['hello']);

function $effect(fn: () => void | (() => void)): void
namespace $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(() => {
	let array: 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)): void
namespace $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 mutation
	let array: 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 return
a negative value if the first argument is less than the second argument, zero if they're equal, and a positive
value 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 a logs array in an effect, make logs a normal array rather than $state([])). In the rare cases where you really do need to write to state in an effect — which you should avoid — you can read the state with untrack to avoid adding it as a dependency.

flush_sync_in_effect

Cannot use `flushSync` inside an effect

The flushSync() 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 but not inside an effect.

This restriction only applies when using the experimental.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 the experimental.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>
	let count = $state(0);

	let even = $state(true);

	let odd = $derived.by(() => {
		even = count % 2 === 0;
		return !even;
	});
</script>

<button onclick={() => 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 before odd is recalculated, even will be stale. In most cases the solution is to make everything derived:

let let even: booleaneven = function $derived<boolean>(expression: boolean): boolean
namespace $derivedDeclares derived state, i.e. one that depends on other state variables.
The expression inside $derived(...) should be free of side-effects.
Example:
let double = $derived(count * 2);
https://svelte.dev/docs/svelte/$derived
@paramexpression The derived state expression$derived(let count: numbercount % 2 === 0);
let let odd: booleanodd = function $derived<boolean>(expression: boolean): boolean
namespace $derivedDeclares derived state, i.e. one that depends on other state variables.
The expression inside $derived(...) should be free of side-effects.
Example:
let double = $derived(count * 2);
https://svelte.dev/docs/svelte/$derived
@paramexpression The derived state expression$derived(!let even: 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 an onerror function, it must not call the provided reset 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 the onerror callback, you must at least wait for the boundary to settle before calling reset(), for example using tick:

<svelte:boundary onerror={async (error, reset) => {
	fixTheError();
	await tick();
	reset();
}}>

</svelte:boundary>

Server errors

lifecycle_function_unavailable

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

Certain methods such as mount 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

The await 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 a pending snippet:

<svelte:boundary>
	<p>{await getData()}</p>

	{#snippet pending()}
		<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>
	{#each items as item}
		<li>{@render children(item)}</li>
	{/each}
</ul>

<script lang="ts">
	let { items, children } = $props();
</script>

<ul>
	{#each items as item}
		<li>{@render children(item)}</li>
	{/each}
</ul>

Here, List.svelte is using {@render children(item) which means it expects Parent.svelte to use snippets. Instead, Parent.svelte uses the deprecated let: 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 the top level of the instance script of your component.

<script>
	import { onMount } from 'svelte';

	function handleClick() {
		// This is wrong
		onMount(() => {})
	}

	// This is correct
	onMount(() => {})
</script>

<button onclick={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):

Parent

<ChildComponent>
  {#snippet label()}
	<span>Hi!</span>
  {/snippet}
</ChildComponent>

Child

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

<!-- This component doesn't expect a snippet, but the parent provided one -->
<p>{label}</p>

<script lang="ts">
  let { label } = $props();
</script>

<!-- This component doesn't expect a snippet, but the parent provided one -->
<p>{label}</p>

store_invalid_shape

`%name%` is not a store with a `subscribe` method

svelte_element_invalid_this_value

The `this` prop on `<svelte:element>` must be a string, if defined

Edit this page on GitHub llms.txt

previous next

Compiler warnings Runtime warnings