a11y_positive_tabindex warning
The `a11y_positive_tabindex` warning enforces avoiding positive `tabindex` property values, as these move elements out of the expected tab order and create a confusing experience for keyboard users.
Svelte · Language · all subjects
core/runtime
246 notes in this subject, read out of this brain and free to use. This is page 4 of 5.
a11y_role_has_required_aria_props warning
The `a11y_role_has_required_aria_props` warning requires that elements with ARIA roles must have all required attributes defined for that role.
a11y_role_supports_aria_props and a11y_role_supports_aria_props_implicit warnings
The `a11y_role_supports_aria_props` warning enforces that elements with explicit roles only contain `aria-*` properties supported by that role. The `a11y_role_supports_aria_props_implicit` variant applies to elements with implicit roles.
a11y_unknown_aria_attribute warning
The `a11y_unknown_aria_attribute` warning enforces that only known ARIA attributes are used, based on the WAI-ARIA States and Properties spec. It provides suggestions for misspelled attributes like 'aria-labeledby' (should be 'aria-labelledby').
a11y_unknown_role warning
The `a11y_unknown_role` warning requires that elements with ARIA roles use a valid, non-abstract ARIA role from the WAI-ARIA role definitions. It provides suggestions for misspelled roles like 'toooltip' (should be 'tooltip').
attribute_avoid_is warning
The `attribute_avoid_is` warning states that the 'is' attribute is not supported cross-browser and should be avoided.
attribute_global_event_reference warning
The `attribute_global_event_reference` warning alerts when code references `globalThis.%name%`, suggesting that a variable with that name may have been forgotten.
attribute_illegal_colon warning
The `attribute_illegal_colon` warning enforces that attributes should not contain ':' characters to prevent ambiguity with Svelte directives.
attribute_invalid_property_name warning
The `attribute_invalid_property_name` warning alerts when an invalid HTML attribute is used and provides suggestions for the correct attribute name.
attribute_quoted warning
The `attribute_quoted` warning alerts that quoted attributes on components and custom elements will be stringified in a future version of Svelte. If stringification is not desired, quotes should be removed.
node_invalid_placement_ssr warning
The `node_invalid_placement_ssr` warning alerts when HTML structure violates HTML restrictions and would be 'repaired' by the browser during server-side rendering, causing hydration mismatches. Examples include `<p>` containing block-level elements, `<option>` containing `<div>`, and `<table>` missing `<tbody>`. This works on the client but breaks hydration on the server.
legacy_code warning
The `legacy_code` warning alerts that certain code patterns are no longer valid and suggests the replacement pattern to use instead.
block_empty warning
The `block_empty` warning alerts when an empty block is encountered.
unknown_code warning
The `unknown_code` warning alerts when a warning code is not recognized. It may provide suggestions for valid codes if a similar one exists.
state_prototype_fixed error
The error 'Cannot set prototype of `$state` object' occurs when attempting to modify the prototype of a state object. The prototype of state objects cannot be changed.
state_unsafe_mutation error
The error 'Updating state inside `$derived(...)`, `$inspect(...)` or a template expression is forbidden' occurs when state is modified while evaluating a derived, inspect, or template expression. If a value should not be reactive, declare it without `$state`. The solution is usually to make everything derived rather than derived and state, or use `$effect` if side-effects are unavoidable.
svelte_boundary_reset_onerror error
The error 'A `<svelte:boundary>` `reset` function cannot be called while an error is still being handled' occurs when the `onerror` callback of a boundary tries to call `reset()` synchronously. The boundary is still in a broken state at that point. Call `reset()` later after the error is resolved, for example using `await tick()` to wait for the boundary to settle.
async_local_storage_unavailable error (server)
The error 'The node API `AsyncLocalStorage` is not available, but is required to use async server rendering' occurs on the server when AsyncLocalStorage is not available. Some platforms require configuration flags to enable this API; consult your platform's documentation.
dynamic_element_invalid_tag error (server)
The error '`<svelte:element this="%tag%">` is not a valid element name' occurs when an invalid value is passed to the `this` prop of `<svelte:element>`. The value must be a valid HTML element, SVG element, MathML element, or custom element name. Values containing invalid characters such as whitespace or special characters are rejected for security reasons.
html_deprecated error (server)
The error 'The `html` property of server render results has been deprecated. Use `body` instead' indicates that code is using the deprecated `html` property. Use the `body` property instead.
hydratable_clobbering error (server)
The error 'Attempted to set `hydratable` with key `%key%` twice with different values' occurs when `hydratable` is called multiple times with the same key but different value functions. To fix this, ensure all invocations with the same key result in the same value, or update the keys to make both instances unique.
hydratable_serialization_failed error (server)
The error 'Failed to serialize `hydratable` data for key `%key%`' occurs when the value returned by a hydratable cannot be serialized. `hydratable` can serialize anything that `uneval` from `devalue` can serialize, plus Promises.
invalid_csp error (server)
The error '`csp.nonce` was set while `csp.hash` was `true`. These options cannot be used simultaneously' occurs when both nonce and hash CSP options are enabled at the same time. Only one should be used.
get_abort_signal_outside_reaction error
The error '`getAbortSignal()` can only be called inside an effect or derived' occurs when attempting to call `getAbortSignal()` outside of an effect or derived context.
fork_timing error
The error 'Cannot create a fork inside an effect or when state changes are pending' occurs when attempting to create a fork at an invalid time. Forks cannot be created inside effects or while state changes are being processed.
await_invalid error (server)
The error 'Encountered asynchronous work while rendering synchronously' occurs when calling `render(...)` with a component containing an `await` expression in synchronous mode. Either `await` the result of `render`, or wrap the `await` or the component containing it in a `<svelte:boundary>` with a `pending` snippet.
set_context_after_init error
The error '`setContext` must be called when a component first initializes, not in a subsequent effect or after an `await` expression' occurs when `setContext` is called outside of component initialization. Context must be set at the top level of the component script during initialization. This restriction only applies when using the `experimental.async` compiler option.
state_descriptors_fixed error
The error 'Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`' occurs when attempting to define property descriptors on a state object that do not meet the required configuration. All property descriptors on state objects must have `value`, and be enumerable, configurable, and writable.
derived_references_self error
The error 'A derived value cannot reference itself recursively' occurs when a `$derived` expression tries to reference itself, creating infinite recursion.
svelte_element_invalid_this_value error (shared)
The error 'The `this` prop on `<svelte:element>` must be a string, if defined' occurs when the `this` prop is passed a value that is not a string. The prop must be either a string or undefined.
store_invalid_shape error (shared)
The error '`%name%` is not a store with a `subscribe` method' occurs when trying to use a value as a store that does not have a valid `subscribe` method. Stores must be objects with a `subscribe` method.
snippet_without_render_tag error (shared)
The error 'Attempted to render a snippet without a `{@render}` block' occurs when a snippet is used incorrectly. This can happen when a component with a `children` prop does not use `{@render children()}` to render it, or when a parent component passes a snippet to a child that does not expect one. Use `{@render snippet()}` to render snippets, and ensure snippets are only passed when expected.
effect_in_unowned_derived error
The error 'Effect cannot be created inside a `$derived` value that was not itself created inside an effect' occurs when trying to use an effect inside a derived that was created outside of an effect context.
missing_context error (shared)
The error 'Context was not set in a parent component' occurs when using the `get` function from `createContext()` but the corresponding `set` function was never called in a parent component. Context must be set by a parent component before it can be retrieved by a child component.
lifecycle_outside_component error (shared)
The error '`%name%(...)` can only be used during component initialisation' occurs when a lifecycle method is called outside the top level of a component's instance script. Lifecycle methods must be invoked at the top level of the script block, not inside functions, event handlers, or other nested contexts.
invariant_violation error (shared)
The error 'An invariant violation occurred' is a bug in Svelte, not the application. It means Svelte's internal assumptions were flawed. If encountered, please report it at https://github.com/sveltejs/svelte with the error message.
invalid_snippet_arguments error (shared)
The error 'A snippet function was passed invalid arguments. Snippets should only be instantiated via `{@render ...}`' occurs when a snippet is invoked incorrectly, not through a `{@render}` tag.
invalid_default_snippet error (shared)
The error 'Cannot use `{@render children(...)}` if the parent component uses `let:` directives' occurs when a parent component uses the deprecated `let:` directive but the child component expects snippets via `{@render children(...)}`. This API combination is incompatible. Use named snippets instead of `let:` directives.
experimental_async_required error (shared)
The error 'Cannot use `%name%(...)` unless the `experimental.async` compiler option is `true`' occurs when using a feature that requires the `experimental.async` compiler option to be enabled.
server_context_required error
The error 'Could not resolve `render` context' occurs when trying to invoke functions like `hydratable` outside of a `render(...)` call, such as at the top level of a module. These functions require render context.
lifecycle_function_unavailable error (server)
The error '`%name%(...)` is not available on the server' occurs when trying to call a lifecycle function like `mount` in a server context. These functions cannot be invoked on the server; avoid calling them eagerly during render.
invalid_id_prefix error (server)
The error 'The `idPrefix` option cannot include `--`' occurs when the `idPrefix` compiler option contains the string `--`. Update the option to use a different prefix.
effect_in_teardown error
The error '`%rune%` cannot be used inside an effect cleanup function' occurs when attempting to use a rune inside an effect's cleanup function. Effect cleanup functions run after the effect has already executed and cannot create new reactive dependencies.
each_key_volatile error
The error 'Keyed each block has key that is not idempotent' occurs when the key expression in a keyed each block returns different values for the same item on different calls. For example, array literals like `[item.a, item.b]` create a new array each time and will never be equal. Use primitive values or stable keys like `item.a + '-' + item.b` instead.
each_key_duplicate error
The error 'Keyed each block has duplicate key' or 'Keyed each block has duplicate key `%value%`' occurs when multiple items in a keyed each block have the same key at different indexes. Each key must be unique across all items in the each block.
effect_orphan error
The error '`%rune%` can only be used inside an effect' occurs when attempting to create an effect outside of a parent effect context. Effects cannot be created inside event handlers or after an `await` expression (unless the `await` occurs directly inside a component's `<script>` tag at the top level, not inside an async function). In rare cases, you can use `$effect.root` to create effects outside the normal component lifecycle.
effect_pending_outside_reaction error
The error '`$effect.pending()` can only be called inside an effect or derived' occurs when attempting to call `$effect.pending()` outside of an effect or derived context.
effect_update_depth_exceeded error
The error 'Maximum update depth exceeded' occurs when an effect reads and writes the same piece of state, causing it to re-run in an infinite loop. Svelte intervenes to prevent browser tab crashes. This can happen with both direct state updates (like `count += 1`) and array mutations (like `array.push(...)`). However, it is fine for an effect to re-run if it settles (produces no new mutations after running). Often the solution is to make the value a normal variable instead of `$state`, or use `untrack` to avoid adding state as a dependency when writing to it.
fork_discarded error
The error 'Cannot commit a fork that was already discarded' occurs when attempting to commit a fork that has already been discarded.
bind_invalid_export error
The error indicates that a component consumer is attempting to use `bind:%key%` to access an export on a component, which is disallowed. Instead, use `bind:this` to bind the component instance itself, then access the property on that bound instance.
bind_not_bindable error
The error 'A component is attempting to bind to a non-bindable property' occurs when trying to bind to a component property that is not marked as bindable. To mark a property as bindable, declare it as `let { %key% = $bindable() } = $props()`.
flush_sync_in_effect error
The error 'Cannot use `flushSync` inside an effect' occurs when trying to use the `flushSync()` function to flush pending effects synchronously from within an effect. You can call `flushSync` after a state change but not inside an effect itself. This restriction only applies when using the `experimental.async` compiler option.
component_api_changed error
The error 'Calling `%method%` on a component instance is no longer valid in Svelte 5' indicates that method calls on component instances are no longer supported. Svelte 5 changed how components work; refer to the migration guide for details.
component_api_invalid_new error
The error 'Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5' occurs when trying to instantiate a component using the `new` operator. Components are no longer classes in Svelte 5. If the component is not under your control, you can set the `compatibility.componentApi` compiler option to `4` to keep it working.
hydratable_missing_but_required error
The error 'Expected to find a hydratable with key `%key%` during hydration, but did not' occurs when a hydratable is rendered on the client but was not rendered on the server. This forces the hydratable to run its function blockingly during hydration, which hurts performance because it blocks hydration until the asynchronous work completes. Avoid rendering hyperatables conditionally only on the client.
async_derived_orphan error
The error 'Cannot create a `$derived(...)` with an `await` expression outside of an effect tree' occurs when attempting to create an asynchronous derived outside of an effect. Deriveds are created lazily and can be garbage collected if nothing references them, so they can be created anywhere. However, when a derived contains an `await` expression, Svelte uses an effect internally to call the async function proactively. Since effects can only be created inside other effects or effect roots, asynchronous deriveds can only be created inside another effect.
bind_invalid_checkbox_value error
The error 'Using `bind:value` together with a checkbox input is not allowed. Use `bind:checked` instead' occurs when attempting to use `bind:value` on a checkbox input element. Checkbox inputs must use `bind:checked` instead.
hydration_failed error
The error 'Failed to hydrate the application' indicates a general hydration failure when initializing the client-side application from server-rendered HTML.
invalid_snippet error
The error 'Could not `{@render}` snippet due to the expression being `null` or `undefined`' occurs when attempting to render a snippet that is null or undefined. Consider using optional chaining like `{@render snippet?.()}` to handle null or undefined snippets.
lifecycle_legacy_only error
The error '`%name%(...)` cannot be used in runes mode' occurs when attempting to use a lifecycle function that is only available in legacy mode. In Svelte 5 with runes enabled, legacy lifecycle functions are not available.