8.0 KiB
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 count = $state(0);
$effect(() => {
// this both reads and writes `count`,
// so will run in an infinite loop
count += 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 array = $state(['hello']);
$effect(() => {
array.push('goodbye');
});
Note that it's fine for an effect to re-run itself as long as it 'settles':
let array = ['a', 'b', 'c'];
// ---cut---
$effect(() => {
// this is okay, because sorting an already-sorted array
// won't result in a mutation
array.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_invalidate_invalid_source
The argument passed to `$state.invalidate` must be a variable or class field declared with `$state` or `$state.raw`, or a property of a `$state` object.
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 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>