core/errors

78 notes in this subject, read out of this brain and free to use. This is page 1 of 2.

const_tag_invalid_reference scoping error

A {@const} declaration in a parent block is not automatically available in sibling snippet blocks. The code inside <svelte:boundary> becomes part of an implicit children snippet, so {@const} declarations at the boundary top level are only available within that implicit snippet, not in other named snippets like {#snippet failed()}.

transition_slide_display warning

The warning 'transition_slide_display' is thrown when the `slide` transition is applied to an element with an incompatible `display` style. The `slide` transition works by animating the `height` of the element and requires a `display` style like `block`, `flex`, or `grid`. It does not work for `display: inline` (or its variants `inline-block`, `inline-flex`, `inline-grid`), `display: table` or `table-[name]` variants, or `display: contents`.

assignment_value_stale warning

The warning 'assignment_value_stale' occurs when assigning to a property using a nullish coalescing assignment operator (??=) and then immediately using the property, such as in `(object.array ??= []).push(object.array.length)`. The array being pushed to is the right-hand side assignment `[]`, but the resulting value of `object.array` is an empty state proxy, causing the pushed value to be discarded. Fix this by separating the assignment into two statements: first assign `object.array ??= []`, then separately call `object.array.push(object.array.length)`.

await_reactivity_loss warning

The warning 'await_reactivity_loss' occurs when state is read in an async function after an earlier `await`. In Svelte's signal-based reactivity, if an expression contains an `await`, the transformation tracks state both before and after the `await`. However, if the `await` is not 'visible' inside the expression (such as when awaiting the result of a function call), state read inside that function will not be tracked. To fix this, pass the values as parameters into the async function so they are read immediately and tracked properly.

await_waterfall warning

The warning 'await_waterfall' indicates an unnecessary waterfall when multiple `$derived(await ...)` expressions are used sequentially. Each `$derived` with `await` will not be created until the previous one has resolved, even if they have no dependencies on each other. This slows down the app. Fix this by creating the promises first using `$derived(promiseFunction())` and then awaiting them separately with `$derived(await promiseVariable)`.

binding_property_non_reactive warning

The warning 'binding_property_non_reactive' is thrown when binding to a non-reactive property. Reactive properties must be properly marked to support binding.

console_log_state warning

The warning 'console_log_state' is thrown when a `console` method (such as `console.log`) contains `$state` proxies. Browser devtools log the proxy itself rather than the value it represents, which can be confusing because the 'target' of the proxy may not resemble its current value. Use `$inspect(...)` to log a value as it changes over time, or use `$state.snapshot(...)` to log a one-off snapshot of the current value inside event handlers or other contexts.

derived_inert warning

The warning 'derived_inert' occurs when reading a `$derived` value that was created inside an effect after the effect has been destroyed. A `$derived` created inside an effect will stop updating when the effect is destroyed, potentially resulting in stale values. To fix this, create the `$derived` outside the effect, or inside an `$effect.root`.

event_handler_invalid warning

The warning 'event_handler_invalid' is thrown when an event handler is not a function. The message suggests what the handler should be.

hydratable_missing_but_expected warning

The warning 'hydratable_missing_but_expected' occurs when a hydratable with a given key is expected during hydration but not found. This happens when a hydratable is rendered on the client but was not rendered on the server. When this occurs, the hydratable is forced to fall back to running its function blockingly during hydration, which is bad for performance because it blocks hydration until the asynchronous work completes.

hydration_attribute_changed warning

The warning 'hydration_attribute_changed' is thrown when an attribute on an HTML element (such as `src` on an `<img>`) changes its value between server and client renders. Certain attributes will not be repaired during hydration; the server value is kept instead. This is because updating these attributes can cause the resource to be refetched (or in the case of an `<iframe>`, the frame to be reloaded) even if they resolve to the same resource. Fix this by silencing the warning with a `svelte-ignore` comment, ensuring the value stays the same between server and client, or by using an effect to force an update after mounting.

hydration_html_changed warning

The warning 'hydration_html_changed' is thrown when the value of an `{@html ...}` block changes between server and client renders. The client value will be ignored in favour of the server value. Change detection during hydration is expensive and usually unnecessary. Fix this by silencing the warning with a `svelte-ignore` comment, ensuring the value stays the same between server and client, or by using an effect to force an update after mounting.

hydration_mismatch warning

The warning 'hydration_mismatch' is thrown when Svelte encounters an error while hydrating the HTML from the server. During hydration, Svelte walks the DOM expecting a certain structure. If that structure is different (for example because the HTML was repaired by the DOM due to invalid HTML), Svelte will encounter issues. During development, this error is often preceded by a `console.error` detailing the offending HTML.

invalid_raw_snippet_render warning

The warning 'invalid_raw_snippet_render' is thrown when the `render` function passed to `createRawSnippet` does not return HTML for a single element.

legacy_recursive_reactive_block warning

The warning 'legacy_recursive_reactive_block' is detected in migrated code when a `$:` reactive block both accesses and updates the same reactive value. This may cause recursive updates when the block is converted to an `$effect`.

lifecycle_double_unmount warning

The warning 'lifecycle_double_unmount' is thrown when `unmount` is called on a component that was not mounted.

ownership_invalid_binding warning

The warning 'ownership_invalid_binding' is thrown when a parent component passes a property to a child component with `bind:`, but the parent's own parent did not declare that property as a binding. For example, if `GrandParent` binds `bind:value` to `Parent`, but `Parent` passes the value as `{value}` (without `bind:`) to `Child` which tries to do `bind:value`, the warning is thrown. Fix this by using `bind:` in the parent component to pass the binding up the chain (e.g., `<Parent bind:value />`)

ownership_invalid_mutation warning

The warning 'ownership_invalid_mutation' is thrown when a component mutates unbound props that are owned by a parent component. This is strongly discouraged because it creates code that is hard to reason about at scale ('who mutated this value?'). Fix this by either creating callback props to communicate changes, or by marking the prop as `$bindable` in the parent component to explicitly allow mutations.

select_multiple_invalid_value warning

The warning 'select_multiple_invalid_value' is thrown when the `value` property of a `<select multiple>` element is not an array. The selection will be kept as is. To silence the warning, ensure that `value` is an array for an explicit selection, or is `null` or `undefined` to keep the selection as is.

state_proxy_equality_mismatch warning

The warning 'state_proxy_equality_mismatch' occurs when comparing a reactive `$state(...)` proxy with its original value or with another proxy using `===` or `==`. Because `$state(...)` creates a proxy, the proxy and the original value have different identities, so equality checks will always return `false`. To resolve this, ensure both values being compared were either both created with `$state(...)` or neither were. Note that `$state.raw(...)` does not create a state proxy.

svelte_boundary_reset_noop warning

The warning 'svelte_boundary_reset_noop' indicates that a `<svelte:boundary>` `reset` function only resets the boundary the first time it is called. When an error occurs while rendering the contents of a `<svelte:boundary>`, the `onerror` handler is called with the error and a `reset` function. This `reset` function should only be called once; after that, it has no effect. If a reference to `reset` is stored outside the boundary, calling it again will not cause the contents to be re-rendered.

state_proxy_unmount warning

The warning 'state_proxy_unmount' is thrown when `unmount` is called with a state proxy instead of a component. Avoid using `$state` to wrap the return value of `mount`. If the component needs to be reactive for some reason, use `$state.raw` instead.

const_tag_invalid_reference error scope

A {@const} declaration at the top level inside <svelte:boundary> or <Component> is not available in other snippet blocks, because the top level code becomes part of the implicit children snippet. For example, a {@const foo = 'bar'} at the top level of <svelte:boundary> is not accessible inside the failed() snippet block.

each_item_invalid_assignment error

Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead. For example, use array[i] = value instead of entry = value, or bind:value={array[i]} instead of bind:value={entry}.

effect_invalid_placement error

$effect() can only be used as an expression statement, not inside other expressions or contexts.

experimental_async error

Cannot use await in deriveds and template expressions, or at the top level of a component, unless the experimental.async compiler option is true.

host_invalid_placement error

$host() can only be used inside custom element component instances.

illegal_await_expression error

use:, transition:, and animate: directives, attachments and bindings do not support await expressions.

legacy_await_invalid error

Cannot use await in deriveds and template expressions, or at the top level of a component, unless in runes mode.

legacy_export_invalid error

Cannot use export let in runes mode — use $props() instead.

legacy_props_invalid error

Cannot use $$props in runes mode.

legacy_reactive_statement_invalid error

$: is not allowed in runes mode, use $derived or $effect instead.

legacy_rest_props_invalid error

Cannot use $$restProps in runes mode.

mixed_event_handler_syntaxes error

Mixing old (on:name) and new syntaxes for event handling is not allowed. Use only the onname syntax.

props_duplicate error

Cannot use $props() more than once in a component.

props_illegal_name error

Declaring or accessing a prop starting with $$ is illegal because they are reserved for Svelte internals.

props_invalid_identifier error

$props() can only be used with an object destructuring pattern.

props_invalid_pattern error

$props() assignment must not contain nested properties or computed keys.

props_invalid_placement error

$props() can only be used at the top level of components as a variable declaration initializer.

render_tag_invalid_expression error

{@render ...} tags can only contain call expressions, not other expression types.

state_field_duplicate error

A state field name has already been declared on a class. State field declarations using $state or $derived runes can happen in the class body or inside the constructor, but only once per field name.

state_field_invalid_assignment error

Cannot assign to a state field before its declaration.

state_invalid_placement error

$state(), $derived(), and related runes can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.

store_invalid_subscription error

Cannot reference store value inside <script module>.

store_invalid_subscription_module error

Using the $ prefix to refer to the value of a store is only possible inside .svelte files, where Svelte can automatically create subscriptions. This is not available outside .svelte files.

svelte_boundary_invalid_attribute error

Valid attributes on <svelte:boundary> are onerror and failed.

svelte_boundary_invalid_attribute_value error

Attribute value on <svelte:boundary> must be a non-string expression.

svelte_element_missing_this error

<svelte:element> must have a 'this' attribute with a value that specifies which element to render.

svelte_options_invalid_customelement error

The customElement option must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: "open" | "none" | ShadowRootInit; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }.

svelte_options_invalid_customelement_props error

The props option in customElement must be a statically analyzable object literal of the form { [key: string]: { attribute?: string; reflect?: boolean; type?: "String" | "Boolean" | "Number" | "Array" | "Object" } }.

svelte_options_invalid_customelement_shadow error

The shadow option in customElement must be either "open", "none" or a ShadowRootInit object. See https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#options for valid shadow root constructor options.

svelte_options_invalid_tagname error

Custom element tag name must be lowercase and hyphenated. See https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name for more information.

svelte_options_reserved_tagname error

The custom element tag name is reserved and cannot be used. See https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name for more information.

svelte_self_invalid_placement error

<svelte:self> components can only exist inside {#if} blocks, {#each} blocks, {#snippet} blocks or slots passed to components.

derived_invalid_export error

Cannot export derived state from a module. To expose the current derived value, export a function returning its value.

animation_duplicate error

An element can only have one 'animate' directive. Using multiple animate directives on the same element causes a compile error.

state_invalid_export error

Cannot export state from a module if it is reassigned. Either export a function returning the state value or only mutate the state value's properties.

rune_invalid_arguments error

A rune cannot be called with arguments. Runes like $state, $derived, $effect, etc. must be called without arguments.

rune_invalid_arguments_length error

A rune must be called with a specific number of arguments. The error message indicates how many arguments are required.

rune_invalid_computed_property error

Cannot access a computed property of a rune.

Give your agent this brain