svelte
Svelte Error Codes
Snake_case error and warning codes produced by the Svelte 5 compiler and runtime, covering template syntax, bindings, runes (`$state`, `$derived`, `$effect`), snippets, and accessibility checks.
10 codes
references svelte.dev/docs/svelte/compiler-errorssvelte.dev/docs/svelte/runtime-errorssvelte.dev/docs/svelte/compiler-warnings
· All codes 10 codes
- a11y_missing_attribute Accessibility - Missing Attribute An element is missing an attribute required for accessibility — most commonly an `<img>` without `alt`, an `<a>` without `href`, or an `<iframe>` without `title`. The Svelte compiler's a11y checks surface these at build time so they can be fixed before reaching users of assistive technology.
- bind_invalid_target Invalid Bind Target A `bind:` directive was given a target that isn't a valid binding expression — bindings can only target an identifier or a member expression (e.g. `bind:value={name}` or `bind:value={form.name}`), not arbitrary expressions.
- css_unused_selector Unused CSS Selector A selector inside a component's `<style>` block doesn't match any element in that component's markup, so Svelte's scoped-CSS compiler flags it as dead code. Common causes are typos, selectors meant for slotted/child-component markup (use `:global(...)`), or leftover styles after refactoring.
- derived_references_self Derived References Self A `$derived(...)` expression reads the very value it's assigned to, creating a circular dependency. Derived values must be computed purely from other state — restructure the logic so the derivation doesn't depend on its own previous result.
- each_key_duplicate Keyed Each Block Has Duplicate Key A keyed `{#each list as item (key)}` block produced the same key for more than one item. Key expressions must be unique and stable across re-renders — derive a primitive value (e.g. `item.id`) rather than an object or array, which is never equal to itself between renders.
- effect_orphan Effect Orphan `$effect()` was called outside of any effect tree — for example, during module evaluation or in a plain function called from outside component initialisation. Effects can only be created inside a component, or inside another effect/`$effect.root(...)`.
- effect_update_depth_exceeded Effect Update Depth Exceeded Svelte detected an infinite update loop — an `$effect` (or reactive statement) keeps re-running because it both reads and writes the same reactive state. Equivalent to React's "Maximum update depth exceeded"; break the cycle by reading and writing different state, or guarding the write with a condition.
- lifecycle_outside_component Lifecycle Function Called Outside Component A lifecycle function such as `onMount`, `onDestroy`, `beforeUpdate`, or `getContext` was called outside of a component's initialisation — for example inside an event handler, `setTimeout`, or after an `await`. These functions must be called synchronously while the component is being instantiated.
- snippet_invalid_rest_parameter Snippet Invalid Rest Parameter A `{#snippet ...}` block declared a rest parameter (`...args`), which snippets don't support. Use an array parameter instead and spread values into it at the call site.
- state_unsafe_mutation Unsafe State Mutation Reactive state was mutated somewhere it isn't allowed — most commonly inside a `$derived(...)` expression or directly in a template. Derived values must be pure; if the value shouldn't be reactive, declare it without `$state`, or move the mutation into an `$effect`.