--- NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts title: '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`](/docs/svelte/$derived) and [`$effect`](/docs/svelte/$effect). Deriveds can be created anywhere, because they run _lazily_ and can be [garbage collected](https://developer.mozilla.org/en-US/docs/Glossary/Garbage_collection) 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](/docs/svelte/$effect#$effect.root), 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](/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 the [migration guide](/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_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: ```js 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: ```js 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': ```js 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]($effect#When-not-to-use-$effect) — you can read the state with [untrack](svelte#untrack) to avoid adding it as a dependency. ### experimental_async_fork ``` Cannot use `fork(...)` unless the `experimental.async` compiler option is `true` ``` ### 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. ### fork_discarded ``` Cannot commit a fork that was already discarded ``` ### fork_timing ``` Cannot create a fork inside an effect or when state changes are pending ``` ### 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: ```svelte

{count} is even: {even}

{count} is odd: {odd}

``` This is forbidden because it introduces instability: if `

{count} is even: {even}

` is updated before `odd` is recalculated, `even` will be stale. In most cases the solution is to make everything derived: ```js let count = 0; // ---cut--- let even = $derived(count % 2 === 0); let odd = $derived(!even); ``` If side-effects are unavoidable, use [`$effect`]($effect) instead. ### svelte_boundary_reset_onerror ``` A `` `reset` function cannot be called while an error is still being handled ``` If a [``](https://svelte.dev/docs/svelte/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`](https://svelte.dev/docs/svelte/lifecycle-hooks#tick): ```svelte { fixTheError(); +++await tick();+++ reset(); }}> ``` ## Server errors ### await_invalid ``` Encountered asynchronous work while rendering synchronously. ``` You (or the framework you're using) called [`render(...)`](svelte-server#render) with a component containing an `await` expression. Either `await` the result of `render` or wrap the `await` (or the component containing it) in a [``](svelte-boundary) with a `pending` snippet. ### html_deprecated ``` The `html` property of server render results has been deprecated. Use `body` instead. ``` ### 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: ```svelte {entry} ``` ```svelte

{@render children(item)}

``` 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. ```svelte ``` ### missing_context ``` Context was not set in a parent component ``` The [`createContext()`](svelte#createContext) utility returns a `[get, set]` pair of functions. `get` will throw an error if `set` was not used to set the context in a parent component. ### 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): ```svelte {children} ``` ...or like this (a parent component is passing a snippet where a non-snippet value is expected): ```svelte {#snippet label()} Hi! {/snippet} ``` ```svelte

{label}

``` ### store_invalid_shape ``` `%name%` is not a store with a `subscribe` method ``` ### svelte_element_invalid_this_value ``` The `this` prop on `` must be a string, if defined ```

runtime-errors