Skip to main content

Runtime errors

Client errors

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

%parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes 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 https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes 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_update_depth_exceeded

Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops

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

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_local_read

Reading state that was created inside the same derived is forbidden. Consider using `untrack` to read locally created state

state_unsafe_mutation

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

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

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.

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>

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