generated: 'generated by process-messages/index.js'
---
## a11y_accesskey
## `a11y_accesskey`
```
Avoid using accesskey
```
## a11y_aria_activedescendant_has_tabindex
## `a11y_aria_activedescendant_has_tabindex`
```
An element with an aria-activedescendant attribute should have a tabindex value
```
## a11y_aria_attributes
## `a11y_aria_attributes`
```
`<%name%>` should not have aria-* attributes
```
## a11y_autocomplete_valid
## `a11y_autocomplete_valid`
```
'%value%' is an invalid value for 'autocomplete' on `<input type="%type%">`
```
## a11y_autofocus
## `a11y_autofocus`
```
Avoid using autofocus
```
## a11y_click_events_have_key_events
## `a11y_click_events_have_key_events`
```
Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type="button">` or `<a>` might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details
```
## a11y_consider_explicit_label
## `a11y_consider_explicit_label`
```
Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute
```
## a11y_distracting_elements
## `a11y_distracting_elements`
```
Avoid `<%name%>` elements
```
## a11y_figcaption_index
## `a11y_figcaption_index`
```
`<figcaption>` must be first or last child of `<figure>`
```
## a11y_figcaption_parent
## `a11y_figcaption_parent`
```
`<figcaption>` must be an immediate child of `<figure>`
```
## a11y_hidden
## `a11y_hidden`
```
`<%name%>` element should not be hidden
```
## a11y_img_redundant_alt
## `a11y_img_redundant_alt`
```
Screenreaders already announce `<img>` elements as an image
```
## a11y_incorrect_aria_attribute_type
## `a11y_incorrect_aria_attribute_type`
```
The value of '%attribute%' must be a %type%
```
## a11y_incorrect_aria_attribute_type_boolean
## `a11y_incorrect_aria_attribute_type_boolean`
```
The value of '%attribute%' must be either 'true' or 'false'. It cannot be empty
```
## a11y_incorrect_aria_attribute_type_id
## `a11y_incorrect_aria_attribute_type_id`
```
The value of '%attribute%' must be a string that represents a DOM element ID
```
## a11y_incorrect_aria_attribute_type_idlist
## `a11y_incorrect_aria_attribute_type_idlist`
```
The value of '%attribute%' must be a space-separated list of strings that represent DOM element IDs
```
## a11y_incorrect_aria_attribute_type_integer
## `a11y_incorrect_aria_attribute_type_integer`
```
The value of '%attribute%' must be an integer
```
## a11y_incorrect_aria_attribute_type_token
## `a11y_incorrect_aria_attribute_type_token`
```
The value of '%attribute%' must be exactly one of %values%
```
## a11y_incorrect_aria_attribute_type_tokenlist
## `a11y_incorrect_aria_attribute_type_tokenlist`
```
The value of '%attribute%' must be a space-separated list of one or more of %values%
```
## a11y_incorrect_aria_attribute_type_tristate
## `a11y_incorrect_aria_attribute_type_tristate`
```
The value of '%attribute%' must be exactly one of true, false, or mixed
```
## a11y_interactive_supports_focus
## `a11y_interactive_supports_focus`
```
Elements with the '%role%' interactive role must have a tabindex value
```
## a11y_invalid_attribute
## `a11y_invalid_attribute`
```
'%href_value%' is not a valid %href_attribute% attribute
```
## a11y_label_has_associated_control
## `a11y_label_has_associated_control`
```
A form label must be associated with a control
```
## a11y_media_has_caption
## `a11y_media_has_caption`
```
`<video>` elements must have a `<track kind="captions">`
```
## a11y_misplaced_role
## `a11y_misplaced_role`
```
`<%name%>` should not have role attribute
```
## a11y_misplaced_scope
## `a11y_misplaced_scope`
```
The scope attribute should only be used with `<th>` elements
```
## a11y_missing_attribute
## `a11y_missing_attribute`
```
`<%name%>` element should have %article% %sequence% attribute
```
## a11y_missing_content
## `a11y_missing_content`
```
`<%name%>` element should contain text
```
## a11y_mouse_events_have_key_events
## `a11y_mouse_events_have_key_events`
```
'%event%' event must be accompanied by '%accompanied_by%' event
Unknown aria attribute 'aria-%attribute%'. Did you mean '%suggestion%'?
```
## a11y_unknown_role
## `a11y_unknown_role`
```
Unknown role '%role%'
@ -261,222 +261,213 @@ Unknown role '%role%'
Unknown role '%role%'. Did you mean '%suggestion%'?
```
## legacy_code
## `attribute_avoid_is`
```
`%code%` is no longer valid — please use `%suggestion%` instead
The "is" attribute is not supported cross-browser and should be avoided
```
## unknown_code
## `attribute_global_event_reference`
```
`%code%` is not a recognised code
```
```
`%code%` is not a recognised code (did you mean `%suggestion%`?)
You are referencing `globalThis.%name%`. Did you forget to declare a variable with that name?
```
## options_deprecated_accessors
## `attribute_illegal_colon`
```
The `accessors` option has been deprecated. It will have no effect in runes mode
Attributes should not contain ':' characters to prevent ambiguity with Svelte directives
```
## options_deprecated_immutable
## `attribute_invalid_property_name`
```
The `immutable` option has been deprecated. It will have no effect in runes mode
'%wrong%' is not a valid HTML attribute. Did you mean '%right%'?
```
## options_missing_custom_element
## `attribute_quoted`
```
The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?
Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes
```
## options_removed_enable_sourcemap
## `bind_invalid_each_rest`
```
The `enableSourcemap` option has been removed. Source maps are always generated now, and tooling can choose to ignore them
The rest operator (...) will create a new object and binding '%name%' with the original object will not work
```
## options_removed_hydratable
## `block_empty`
```
The `hydratable` option has been removed. Svelte components are always hydratable now
Empty block
```
## options_removed_loop_guard_timeout
## `component_name_lowercase`
```
The `loopGuardTimeout` option has been removed
`<%name%>` will be treated as an HTML element unless it begins with a capital letter
```
## options_renamed_ssr_dom
## `css_unused_selector`
```
`generate: "dom"` and `generate: "ssr"` options have been renamed to "client" and "server" respectively
Unused CSS selector "%name%"
```
## export_let_unused
## `element_invalid_self_closing_tag`
```
Component has unused export property '%name%'. If it is for external reference only, please consider using `export const %name%`
Self-closing HTML tags for non-void elements are ambiguous — use `<%name% ...></%name%>` rather than `<%name% ... />`
```
## legacy_component_creation
## `event_directive_deprecated`
```
Svelte 5 components are no longer classes. Instantiate them using `mount` or `hydrate` (imported from 'svelte') instead.
Using `on:%name%` to listen to the %name% event is deprecated. Use the event attribute `on%name%` instead
```
## non_reactive_update
## `export_let_unused`
```
`%name%` is updated, but is not declared with `$state(...)`. Changing its value will not correctly trigger updates
Component has unused export property '%name%'. If it is for external reference only, please consider using `export const %name%`
```
## perf_avoid_inline_class
## `legacy_code`
```
Avoid 'new class' — instead, declare the class at the top level scope
`%code%` is no longer valid — please use `%suggestion%` instead
```
## perf_avoid_nested_class
## `legacy_component_creation`
```
Avoid declaring classes below the top level scope
Svelte 5 components are no longer classes. Instantiate them using `mount` or `hydrate` (imported from 'svelte') instead.
```
## reactive_declaration_invalid_placement
## `node_invalid_placement_ssr`
```
Reactive declarations only exist at the top level of the instance script
%thing% is invalid inside `<%parent%>`. When rendering this component on the server, the resulting HTML will be modified by the browser, likely resulting in a `hydration_mismatch` warning
```
## reactive_declaration_module_script_dependency
HTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:
```
Reassignments of module-level declarations will not cause reactive statements to update
```
- `<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` for example (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)
- `<option><div>option a</div></option>` will result in `<option>option a</option>` (the `<div>` is removed)
- `<table><tr><td>cell</td></tr></table>` will result in `<table><tbody><tr><td>cell</td></tr></tbody></table>` (a `<tbody>` is auto-inserted)
This code will work when the component is rendered on the client (which is why this is a warning rather than an error), but if you use server rendering it will cause hydration to fail.
## reactive_declaration_non_reactive_property
## `non_reactive_update`
```
Properties of objects and arrays are not reactive unless in runes mode. Changes to this property will not cause the reactive statement to update
`%name%` is updated, but is not declared with `$state(...)`. Changing its value will not correctly trigger updates
```
## state_referenced_locally
## `options_deprecated_accessors`
```
State referenced in its own scope will never update. Did you mean to reference it inside a closure?
The `accessors` option has been deprecated. It will have no effect in runes mode
```
## store_rune_conflict
## `options_deprecated_immutable`
```
It looks like you're using the `$%name%` rune, but there is a local binding called `%name%`. Referencing a local variable with a `$` prefix will create a store subscription. Please rename `%name%` to avoid the ambiguity
The `immutable` option has been deprecated. It will have no effect in runes mode
```
## css_unused_selector
## `options_missing_custom_element`
```
Unused CSS selector "%name%"
The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?
```
## attribute_avoid_is
## `options_removed_enable_sourcemap`
```
The "is" attribute is not supported cross-browser and should be avoided
The `enableSourcemap` option has been removed. Source maps are always generated now, and tooling can choose to ignore them
```
## attribute_global_event_reference
## `options_removed_hydratable`
```
You are referencing `globalThis.%name%`. Did you forget to declare a variable with that name?
The `hydratable` option has been removed. Svelte components are always hydratable now
```
## attribute_illegal_colon
## `options_removed_loop_guard_timeout`
```
Attributes should not contain ':' characters to prevent ambiguity with Svelte directives
The `loopGuardTimeout` option has been removed
```
## attribute_invalid_property_name
## `options_renamed_ssr_dom`
```
'%wrong%' is not a valid HTML attribute. Did you mean '%right%'?
`generate: "dom"` and `generate: "ssr"` options have been renamed to "client" and "server" respectively
```
## attribute_quoted
## `perf_avoid_inline_class`
```
Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes
Avoid 'new class' — instead, declare the class at the top level scope
```
## bind_invalid_each_rest
## `perf_avoid_nested_class`
```
The rest operator (...) will create a new object and binding '%name%' with the original object will not work
Avoid declaring classes below the top level scope
```
## block_empty
## `reactive_declaration_invalid_placement`
```
Empty block
Reactive declarations only exist at the top level of the instance script
`<%name%>` will be treated as an HTML element unless it begins with a capital letter
Reassignments of module-level declarations will not cause reactive statements to update
```
## element_invalid_self_closing_tag
## `reactive_declaration_non_reactive_property`
```
Self-closing HTML tags for non-void elements are ambiguous — use `<%name% ...></%name%>` rather than `<%name% ... />`
Properties of objects and arrays are not reactive unless in runes mode. Changes to this property will not cause the reactive statement to update
```
## event_directive_deprecated
## `script_context_deprecated`
```
Using `on:%name%` to listen to the %name% event is deprecated. Use the event attribute `on%name%` instead
`context="module"` is deprecated, use the `module` attribute instead
```
## node_invalid_placement_ssr
## `script_unknown_attribute`
```
%thing% is invalid inside `<%parent%>`. When rendering this component on the server, the resulting HTML will be modified by the browser, likely resulting in a `hydration_mismatch` warning
Unrecognized attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it
```
HTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:
- `<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` for example (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)
- `<option><div>option a</div></option>` will result in `<option>option a</option>` (the `<div>` is removed)
- `<table><tr><td>cell</td></tr></table>` will result in `<table><tbody><tr><td>cell</td></tr></tbody></table>` (a `<tbody>` is auto-inserted)
This code will work when the component is rendered on the client (which is why this is a warning rather than an error), but if you use server rendering it will cause hydration to fail.
## script_context_deprecated
## `slot_element_deprecated`
```
`context="module"` is deprecated, use the `module` attribute instead
Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead
```
## script_unknown_attribute
## `state_referenced_locally`
```
Unrecognized attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it
State referenced in its own scope will never update. Did you mean to reference it inside a closure?
```
## slot_element_deprecated
## `store_rune_conflict`
```
Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead
It looks like you're using the `$%name%` rune, but there is a local binding called `%name%`. Referencing a local variable with a `$` prefix will create a store subscription. Please rename `%name%` to avoid the ambiguity
```
## svelte_component_deprecated
## `svelte_component_deprecated`
```
`<svelte:component>` is deprecated in runes mode — components are dynamic by default
@ -510,14 +501,23 @@ A derived value may be used in other contexts:
+ <Component/>
```
## svelte_element_invalid_this
## `svelte_element_invalid_this`
```
`this` should be an `{expression}`. Using a string attribute value will cause an error in future versions of Svelte
```
## svelte_self_deprecated
## `svelte_self_deprecated`
```
`<svelte:self>` is deprecated — use self-imports (e.g. `import %name% from './%basename%'`) instead
```
## `unknown_code`
```
`%code%` is not a recognised code
```
```
`%code%` is not a recognised code (did you mean `%suggestion%`?)
generated: 'generated by process-messages/index.js'
---
## bind_invalid_checkbox_value
## `bind_invalid_checkbox_value`
```
Using `bind:value` together with a checkbox input is not allowed. Use `bind:checked` instead
```
## bind_invalid_export
## `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
## `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
## `component_api_changed`
```
%parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
```
## component_api_invalid_new
## `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 https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
```
## derived_references_self
## `derived_references_self`
```
A derived value cannot reference itself recursively
```
## each_key_duplicate
## `each_key_duplicate`
```
Keyed each block has duplicate key at indexes %a% and %b%
@ -48,115 +48,115 @@ 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
## `effect_in_teardown`
```
`%rune%` cannot be used inside an effect cleanup function
```
## effect_in_unowned_derived
## `effect_in_unowned_derived`
```
Effect cannot be created inside a `$derived` value that was not itself created inside an effect
```
## effect_orphan
## `effect_orphan`
```
`%rune%` can only be used inside an effect (e.g. during component initialisation)
```
## effect_update_depth_exceeded
## `effect_update_depth_exceeded`
```
Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops
```
## hydration_failed
## `hydration_failed`
```
Failed to hydrate the application
```
## invalid_snippet
## `invalid_default_snippet`
```
Could not `{@render}` snippet due to the expression being `null` or `undefined`. Consider using optional chaining `{@render snippet?.()}`
Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead
```
## lifecycle_legacy_only
## `invalid_snippet`
```
`%name%(...)` cannot be used in runes mode
Could not `{@render}` snippet due to the expression being `null` or `undefined`. Consider using optional chaining `{@render snippet?.()}`
```
## props_invalid_value
## `lifecycle_function_unavailable`
```
Cannot do `bind:%key%={undefined}` when `%key%` has a fallback value
`%name%(...)` is not available on the server
```
## props_rest_readonly
## `lifecycle_legacy_only`
```
Rest element properties of `$props()` such as `%property%` are readonly
`%name%(...)` cannot be used in runes mode
```
## rune_outside_svelte
## `lifecycle_outside_component`
```
The `%rune%` rune is only available inside `.svelte` and `.svelte.js/ts` files
`%name%(...)` can only be used during component initialisation
```
## state_descriptors_fixed
## `props_invalid_value`
```
Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`.
Cannot do `bind:%key%={undefined}` when `%key%` has a fallback value
```
## state_prototype_fixed
## `props_rest_readonly`
```
Cannot set prototype of `$state` object
Rest element properties of `$props()` such as `%property%` are readonly
```
## state_unsafe_local_read
## `rune_outside_svelte`
```
Reading state that was created inside the same derived is forbidden. Consider using `untrack` to read locally created state
The `%rune%` rune is only available inside `.svelte` and `.svelte.js/ts` files
```
## state_unsafe_mutation
## `state_descriptors_fixed`
```
Updating state inside a derived is forbidden. If the value should not be reactive, declare it without `$state`
Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`.
```
## lifecycle_function_unavailable
## `state_prototype_fixed`
```
`%name%(...)` is not available on the server
Cannot set prototype of `$state` object
```
## invalid_default_snippet
## `state_unsafe_local_read`
```
Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead
Reading state that was created inside the same derived is forbidden. Consider using `untrack` to read locally created state
```
## lifecycle_outside_component
## `state_unsafe_mutation`
```
`%name%(...)` can only be used during component initialisation
Updating state inside a derived is forbidden. If the value should not be reactive, declare it without `$state`
```
## store_invalid_shape
## `store_invalid_shape`
```
`%name%` is not a store with a `subscribe` method
```
## svelte_element_invalid_this_value
## `svelte_element_invalid_this_value`
```
The `this` prop on `<svelte:element>` must be a string, if defined
generated: 'generated by process-messages/index.js'
---
## binding_property_non_reactive
## `binding_property_non_reactive`
```
`%binding%` is binding to a non-reactive property
@ -12,7 +12,7 @@ generated: 'generated by process-messages/index.js'
`%binding%` (%location%) is binding to a non-reactive property
```
## console_log_state
## `console_log_state`
```
Your `console.%method%` contained `$state` proxies. Consider using `$inspect(...)` or `$state.snapshot(...)` instead
@ -22,19 +22,25 @@ When logging a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/R
The easiest way to log a value as it changes over time is to use the [`$inspect`](https://svelte-5-preview.vercel.app/docs/runes#$inspect) rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use [`$state.snapshot`](https://svelte-5-preview.vercel.app/docs/runes#$state-snapshot) to take a snapshot of the current value.
## event_handler_invalid
## `dynamic_void_element_content`
```
`<svelte:element this="%tag%">` is a void element — it cannot have content
```
## `event_handler_invalid`
```
%handler% should be a function. Did you mean to %suggestion%?
```
## hydration_attribute_changed
## `hydration_attribute_changed`
```
The `%attribute%` attribute on `%html%` changed its value between server and client renders. The client value, `%value%`, will be ignored in favour of the server value
```
## hydration_html_changed
## `hydration_html_changed`
```
The value of an `{@html ...}` block changed between server and client renders. The client value will be ignored in favour of the server value
@ -43,7 +49,7 @@ The value of an `{@html ...}` block changed between server and client renders. T
The value of an `{@html ...}` block %location% changed between server and client renders. The client value will be ignored in favour of the server value
```
## hydration_mismatch
## `hydration_mismatch`
```
Hydration failed because the initial UI does not match what was rendered on the server
@ -52,25 +58,25 @@ Hydration failed because the initial UI does not match what was rendered on the
Hydration failed because the initial UI does not match what was rendered on the server. The error occurred near %location%
```
## invalid_raw_snippet_render
## `invalid_raw_snippet_render`
```
The `render` function passed to `createRawSnippet` should return HTML for a single element
```
## lifecycle_double_unmount
## `lifecycle_double_unmount`
```
Tried to unmount a component that was not mounted
```
## ownership_invalid_binding
## `ownership_invalid_binding`
```
%parent% passed a value to %child% with `bind:`, but the value is owned by %owner%. Consider creating a binding between %owner% and %parent%
```
## ownership_invalid_mutation
## `ownership_invalid_mutation`
```
Mutating a value outside the component that created it is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
@ -79,7 +85,7 @@ Mutating a value outside the component that created it is strongly discouraged.
%component% mutated a value owned by %owner%. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
```
## state_proxy_equality_mismatch
## `state_proxy_equality_mismatch`
```
Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results
@ -98,13 +104,7 @@ Reactive `$state(...)` proxies and the values they proxy have different identiti
To resolve this, ensure you're comparing values where both values were created with `$state(...)`, or neither were. Note that `$state.raw(...)` will _not_ create a state proxy.
## dynamic_void_element_content
```
`<svelte:element this="%tag%">` is a void element — it cannot have content
```
## state_snapshot_uncloneable
## `state_snapshot_uncloneable`
```
Value cannot be cloned with `$state.snapshot` — the original value was returned
Simon Holthausen
1 year ago