svelte/packages/svelte/messages/client-errors/errors.md

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_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_mutation

Updating state inside a derived 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 count = 0;
// ---cut---
let even = $derived(count % 2 === 0);
let odd = $derived(!even);

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>