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

Svelte warns you at compile time if it catches potential mistakes, such as writing inaccessible markup.

Some warnings may be incorrect in your concrete use case. You can disable such false positives by placing a `<!-- svelte-ignore <code> -->` comment above the line that causes the warning. Example:

```svelte
<!-- svelte-ignore a11y_autofocus -->
<input autofocus />
```

You can list multiple rules in a single comment, and add an explanatory note alongside them:

```svelte
<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions (because of reasons) -->
<div on:click>...</div>
```

## `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%'?)