svelte/documentation/docs/98-reference/30-compiler-warnings.md

title	generated
Compiler Warnings	generated by process-messages/index.js

a11y_accesskey

Avoid using accesskey

a11y_aria_activedescendant_has_tabindex

An element with an aria-activedescendant attribute should have a tabindex value

a11y_aria_attributes

`<%name%>` should not have aria-* attributes

a11y_autocomplete_valid

'%value%' is an invalid value for 'autocomplete' on `<input type="%type%">`

a11y_autofocus

Avoid using autofocus

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

Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute

a11y_distracting_elements

Avoid `<%name%>` elements

a11y_figcaption_index

`<figcaption>` must be first or last child of `<figure>`

a11y_figcaption_parent

`<figcaption>` must be an immediate child of `<figure>`

a11y_hidden

`<%name%>` element should not be hidden

a11y_img_redundant_alt

Screenreaders already announce `<img>` elements as an image

a11y_incorrect_aria_attribute_type

The value of '%attribute%' must be a %type%

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

The value of '%attribute%' must be a string that represents a DOM element ID

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

The value of '%attribute%' must be an integer

a11y_incorrect_aria_attribute_type_token

The value of '%attribute%' must be exactly one of %values%

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

The value of '%attribute%' must be exactly one of true, false, or mixed

a11y_interactive_supports_focus

Elements with the '%role%' interactive role must have a tabindex value

a11y_invalid_attribute

'%href_value%' is not a valid %href_attribute% attribute

a11y_label_has_associated_control

A form label must be associated with a control

a11y_media_has_caption

`<video>` elements must have a `<track kind="captions">`

a11y_misplaced_role

`<%name%>` should not have role attribute

a11y_misplaced_scope

The scope attribute should only be used with `<th>` elements

a11y_missing_attribute

`<%name%>` element should have %article% %sequence% attribute

a11y_missing_content

`<%name%>` element should contain text

a11y_mouse_events_have_key_events

'%event%' event must be accompanied by '%accompanied_by%' event

a11y_no_abstract_role

Abstract role '%role%' is forbidden

a11y_no_interactive_element_to_noninteractive_role

`<%element%>` cannot have role '%role%'

a11y_no_noninteractive_element_interactions

Non-interactive element `<%element%>` should not be assigned mouse or keyboard event listeners

a11y_no_noninteractive_element_to_interactive_role

Non-interactive element `<%element%>` cannot have interactive role '%role%'

a11y_no_noninteractive_tabindex

noninteractive element cannot have nonnegative tabIndex value

a11y_no_redundant_roles

Redundant role '%role%'

a11y_no_static_element_interactions

`<%element%>` with a %handler% handler must have an ARIA role

a11y_positive_tabindex

Avoid tabindex values above zero

a11y_role_has_required_aria_props

Elements with the ARIA role "%role%" must have the following attributes defined: %props%

a11y_role_supports_aria_props

The attribute '%attribute%' is not supported by the role '%role%'

a11y_role_supports_aria_props_implicit

The attribute '%attribute%' is not supported by the role '%role%'. This role is implicit on the element `<%name%>`

a11y_unknown_aria_attribute

Unknown aria attribute 'aria-%attribute%'

Unknown aria attribute 'aria-%attribute%'. Did you mean '%suggestion%'?

a11y_unknown_role

Unknown role '%role%'

Unknown role '%role%'. Did you mean '%suggestion%'?

legacy_code

`%code%` is no longer valid — please use `%suggestion%` instead

unknown_code

`%code%` is not a recognised code

`%code%` is not a recognised code (did you mean `%suggestion%`?)

options_deprecated_accessors

The `accessors` option has been deprecated. It will have no effect in runes mode

options_deprecated_immutable

The `immutable` option has been deprecated. It will have no effect in runes mode

options_missing_custom_element

The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?

options_removed_enable_sourcemap

The `enableSourcemap` option has been removed. Source maps are always generated now, and tooling can choose to ignore them

options_removed_hydratable

The `hydratable` option has been removed. Svelte components are always hydratable now

options_removed_loop_guard_timeout

The `loopGuardTimeout` option has been removed

options_renamed_ssr_dom

`generate: "dom"` and `generate: "ssr"` options have been renamed to "client" and "server" respectively

export_let_unused

Component has unused export property '%name%'. If it is for external reference only, please consider using `export const %name%`

legacy_component_creation

Svelte 5 components are no longer classes. Instantiate them using `mount` or `hydrate` (imported from 'svelte') instead.

non_reactive_update

`%name%` is updated, but is not declared with `$state(...)`. Changing its value will not correctly trigger updates

perf_avoid_inline_class

Avoid 'new class' — instead, declare the class at the top level scope

perf_avoid_nested_class

Avoid declaring classes below the top level scope

reactive_declaration_invalid_placement

Reactive declarations only exist at the top level of the instance script

reactive_declaration_module_script_dependency

Reassignments of module-level declarations will not cause reactive statements to update

reactive_declaration_non_reactive_property

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

state_referenced_locally

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

store_rune_conflict

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

css_unused_selector

Unused CSS selector "%name%"

attribute_avoid_is

The "is" attribute is not supported cross-browser and should be avoided

attribute_global_event_reference

You are referencing `globalThis.%name%`. Did you forget to declare a variable with that name?

attribute_illegal_colon

Attributes should not contain ':' characters to prevent ambiguity with Svelte directives

attribute_invalid_property_name

'%wrong%' is not a valid HTML attribute. Did you mean '%right%'?

attribute_quoted

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

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

block_empty

Empty block

component_name_lowercase

`<%name%>` will be treated as an HTML element unless it begins with a capital letter

element_invalid_self_closing_tag

Self-closing HTML tags for non-void elements are ambiguous — use `<%name% ...></%name%>` rather than `<%name% ... />`

event_directive_deprecated

Using `on:%name%` to listen to the %name% event is deprecated. Use the event attribute `on%name%` instead

node_invalid_placement_ssr

%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

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.

• <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) 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:

script_context_deprecated

`context="module"` is deprecated, use the `module` attribute instead

script_unknown_attribute

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

Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead

svelte_component_deprecated

`<svelte:component>` is deprecated in runes mode — components are dynamic by default

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

A derived value may be used in other contexts:

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

For complex component resolution logic, an intermediary, capitalized variable may be necessary. E.g. in places where @const can be used: 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. In Svelte 5 this is no longer true — if X changes, <X> re-renders. 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.

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>` is deprecated — use self-imports (e.g. `import %name% from './%basename%'`) instead