---
title: 'Compiler warnings'
generated: 'generated by process-messages/index.js'
---

## `a11y_accesskey`

> [!NOTE] Avoid using accesskey

## `a11y_aria_activedescendant_has_tabindex`

> [!NOTE] An element with an aria-activedescendant attribute should have a tabindex value

## `a11y_aria_attributes`

> [!NOTE] '\<%name%>' should not have aria-* attributes

## `a11y_autocomplete_valid`

> [!NOTE] '%value%' is an invalid value for 'autocomplete' on '\<input type="%type%">'

## `a11y_autofocus`

> [!NOTE] Avoid using autofocus

## `a11y_click_events_have_key_events`

> [!NOTE] 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`

> [!NOTE] Buttons and links should either contain text or have an 'aria-label' or 'aria-labelledby' attribute

## `a11y_distracting_elements`

> [!NOTE] Avoid '\<%name%>' elements

## `a11y_figcaption_index`

> [!NOTE] '\<figcaption>' must be first or last child of '\<figure>'

## `a11y_figcaption_parent`

> [!NOTE] '\<figcaption>' must be an immediate child of '\<figure>'

## `a11y_hidden`

> [!NOTE] '\<%name%>' element should not be hidden

## `a11y_img_redundant_alt`

> [!NOTE] Screenreaders already announce '\<img>' elements as an image

## `a11y_incorrect_aria_attribute_type`

> [!NOTE] The value of '%attribute%' must be a %type%

## `a11y_incorrect_aria_attribute_type_boolean`

> [!NOTE] The value of '%attribute%' must be either 'true' or 'false'. It cannot be empty

## `a11y_incorrect_aria_attribute_type_id`

> [!NOTE] The value of '%attribute%' must be a string that represents a DOM element ID

## `a11y_incorrect_aria_attribute_type_idlist`

> [!NOTE] The value of '%attribute%' must be a space-separated list of strings that represent DOM element IDs

## `a11y_incorrect_aria_attribute_type_integer`

> [!NOTE] The value of '%attribute%' must be an integer

## `a11y_incorrect_aria_attribute_type_token`

> [!NOTE] The value of '%attribute%' must be exactly one of %values%

## `a11y_incorrect_aria_attribute_type_tokenlist`

> [!NOTE] The value of '%attribute%' must be a space-separated list of one or more of %values%

## `a11y_incorrect_aria_attribute_type_tristate`

> [!NOTE] The value of '%attribute%' must be exactly one of true, false, or mixed

## `a11y_interactive_supports_focus`

> [!NOTE] Elements with the '%role%' interactive role must have a tabindex value

## `a11y_invalid_attribute`

> [!NOTE] '%href_value%' is not a valid %href_attribute% attribute

## `a11y_label_has_associated_control`

> [!NOTE] A form label must be associated with a control

## `a11y_media_has_caption`

> [!NOTE] '\<video>' elements must have a '\<track kind="captions">'

## `a11y_misplaced_role`

> [!NOTE] '\<%name%>' should not have role attribute

## `a11y_misplaced_scope`

> [!NOTE] The scope attribute should only be used with '\<th>' elements

## `a11y_missing_attribute`

> [!NOTE] '\<%name%>' element should have %article% %sequence% attribute

## `a11y_missing_content`

> [!NOTE] '\<%name%>' element should contain text

## `a11y_mouse_events_have_key_events`

> [!NOTE] '%event%' event must be accompanied by '%accompanied_by%' event

## `a11y_no_abstract_role`

> [!NOTE] Abstract role '%role%' is forbidden

## `a11y_no_interactive_element_to_noninteractive_role`

> [!NOTE] '\<%element%>' cannot have role '%role%'

## `a11y_no_noninteractive_element_interactions`

> [!NOTE] Non-interactive element '\<%element%>' should not be assigned mouse or keyboard event listeners

## `a11y_no_noninteractive_element_to_interactive_role`

> [!NOTE] Non-interactive element '\<%element%>' cannot have interactive role '%role%'

## `a11y_no_noninteractive_tabindex`

> [!NOTE] noninteractive element cannot have nonnegative tabIndex value

## `a11y_no_redundant_roles`

> [!NOTE] Redundant role '%role%'

## `a11y_no_static_element_interactions`

> [!NOTE] '\<%element%>' with a %handler% handler must have an ARIA role

## `a11y_positive_tabindex`

> [!NOTE] Avoid tabindex values above zero

## `a11y_role_has_required_aria_props`

> [!NOTE] Elements with the ARIA role "%role%" must have the following attributes defined: %props%

## `a11y_role_supports_aria_props`

> [!NOTE] The attribute '%attribute%' is not supported by the role '%role%'

## `a11y_role_supports_aria_props_implicit`

> [!NOTE] The attribute '%attribute%' is not supported by the role '%role%'. This role is implicit on the element '\<%name%>'

## `a11y_unknown_aria_attribute`

> [!NOTE] Unknown aria attribute 'aria-%attribute%'

> [!NOTE] Unknown aria attribute 'aria-%attribute%'. Did you mean '%suggestion%'?

## `a11y_unknown_role`

> [!NOTE] Unknown role '%role%'

> [!NOTE] Unknown role '%role%'. Did you mean '%suggestion%'?

## `attribute_avoid_is`

> [!NOTE] The "is" attribute is not supported cross-browser and should be avoided

## `attribute_global_event_reference`

> [!NOTE] You are referencing 'globalThis.%name%'. Did you forget to declare a variable with that name?

## `attribute_illegal_colon`

> [!NOTE] Attributes should not contain ':' characters to prevent ambiguity with Svelte directives

## `attribute_invalid_property_name`

> [!NOTE] '%wrong%' is not a valid HTML attribute. Did you mean '%right%'?

## `attribute_quoted`

> [!NOTE] 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

## `bind_invalid_each_rest`

> [!NOTE] The rest operator (...) will create a new object and binding '%name%' with the original object will not work

## `block_empty`

> [!NOTE] Empty block

## `component_name_lowercase`

> [!NOTE] '\<%name%>' will be treated as an HTML element unless it begins with a capital letter

## `css_unused_selector`

> [!NOTE] Unused CSS selector "%name%"

## `element_invalid_self_closing_tag`

> [!NOTE] Self-closing HTML tags for non-void elements are ambiguous — use '\<%name% ...>\</%name%>' rather than '\<%name% ... />'

## `event_directive_deprecated`

> [!NOTE] Using 'on:%name%' to listen to the %name% event is deprecated. Use the event attribute 'on%name%' instead

## `export_let_unused`

> [!NOTE] Component has unused export property '%name%'. If it is for external reference only, please consider using 'export const %name%'

## `legacy_code`

> [!NOTE] '%code%' is no longer valid — please use '%suggestion%' instead

## `legacy_component_creation`

> [!NOTE] Svelte 5 components are no longer classes. Instantiate them using 'mount' or 'hydrate' (imported from 'svelte') instead.

## `node_invalid_placement_ssr`

> [!NOTE] %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

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.

## `non_reactive_update`

> [!NOTE] '%name%' is updated, but is not declared with '$state(...)'. Changing its value will not correctly trigger updates

## `options_deprecated_accessors`

> [!NOTE] The 'accessors' option has been deprecated. It will have no effect in runes mode

## `options_deprecated_immutable`

> [!NOTE] The 'immutable' option has been deprecated. It will have no effect in runes mode

## `options_missing_custom_element`

> [!NOTE] The 'customElement' option is used when generating a custom element. Did you forget the 'customElement: true' compile option?

## `options_removed_enable_sourcemap`

> [!NOTE] The 'enableSourcemap' option has been removed. Source maps are always generated now, and tooling can choose to ignore them

## `options_removed_hydratable`

> [!NOTE] The 'hydratable' option has been removed. Svelte components are always hydratable now

## `options_removed_loop_guard_timeout`

> [!NOTE] The 'loopGuardTimeout' option has been removed

## `options_renamed_ssr_dom`

> [!NOTE] 'generate: "dom"' and 'generate: "ssr"' options have been renamed to "client" and "server" respectively

## `perf_avoid_inline_class`

> [!NOTE] Avoid 'new class' — instead, declare the class at the top level scope

## `perf_avoid_nested_class`

> [!NOTE] Avoid declaring classes below the top level scope

## `reactive_declaration_invalid_placement`

> [!NOTE] Reactive declarations only exist at the top level of the instance script

## `reactive_declaration_module_script_dependency`

> [!NOTE] Reassignments of module-level declarations will not cause reactive statements to update

## `reactive_declaration_non_reactive_property`

> [!NOTE] Properties of objects and arrays are not reactive unless in runes mode. Changes to this property will not cause the reactive statement to update

## `script_context_deprecated`

> [!NOTE] 'context="module"' is deprecated, use the 'module' attribute instead

## `script_unknown_attribute`

> [!NOTE] Unrecognized attribute — should be one of 'generics', 'lang' or 'module'. If this exists for a preprocessor, ensure that the preprocessor removes it

## `slot_element_deprecated`

> [!NOTE] Using '\<slot>' to render parent content is deprecated. Use '{@render ...}' tags instead

## `state_referenced_locally`

> [!NOTE] State referenced in its own scope will never update. Did you mean to reference it inside a closure?

## `store_rune_conflict`

> [!NOTE] 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`

> [!NOTE] '\<svelte:component>' is deprecated in runes mode — components are dynamic by default

In previous versions of Svelte, the component constructor was fixed when the component was rendered. In other words, if you wanted `<X>` to re-render when `X` changed, you would either have to use `<svelte:component this={X}>` or put the component inside a `{#key X}...{/key}` block.

In Svelte 5 this is no longer true — if `X` changes, `<X>` re-renders.

In some cases `<object.property>` syntax can be used as a replacement; a lowercased variable with property access is recognized as a component in Svelte 5.

For complex component resolution logic, an intermediary, capitalized variable may be necessary. E.g. in places where `@const` can be used:

```diff
{#each items as item}
-	<svelte:component this={item.condition ? Y : Z} />
+	{@const Component = item.condition ? Y : Z}
+	<Component />
{/each}
```

A derived value may be used in other contexts:

```diff
<script>
	...
	let condition = $state(false);
+	const Component = $derived(condition ? Y : Z);
</script>
- <svelte:component this={condition ? Y : Z} />
+ <Component />
```

## `svelte_element_invalid_this`

> [!NOTE] 'this' should be an '{expression}'. Using a string attribute value will cause an error in future versions of Svelte

## `svelte_self_deprecated`

> [!NOTE] '\<svelte:self>' is deprecated — use self-imports (e.g. 'import %name% from './%basename%'') instead

## `unknown_code`

> [!NOTE] '%code%' is not a recognised code

> [!NOTE] '%code%' is not a recognised code (did you mean '%suggestion%'?)