` with interactive handlers like `click` must have an ARIA role.
```svelte
''}>
```
### a11y\_positive\_tabindex
```
Avoid tabindex values above zero
```
Avoid positive `tabindex` property values. This will move elements out of the expected tab order, creating a confusing experience for keyboard users.
```svelte
```
### a11y\_role\_has\_required\_aria\_props
```
Elements with the ARIA role "%role%" must have the following attributes defined: %props%
```
Elements with ARIA roles must have all required attributes for that role.
```svelte
```
### a11y\_role\_supports\_aria\_props
```
The attribute '%attribute%' is not supported by the role '%role%'
```
Elements with explicit or implicit roles defined contain only `aria-*` properties supported by that role.
```svelte
```
### a11y\_role\_supports\_aria\_props\_implicit
```
The attribute '%attribute%' is not supported by the role '%role%'. This role is implicit on the element `<%name%>`
```
Elements with explicit or implicit roles defined contain only `aria-*` properties supported by that role.
```svelte
```
### a11y\_unknown\_aria\_attribute
```
Unknown aria attribute 'aria-%attribute%'
```
```
Unknown aria attribute 'aria-%attribute%'. Did you mean '%suggestion%'?
```
Enforce that only known ARIA attributes are used. This is based on the [WAI-ARIA States and Properties spec](https://www.w3.org/WAI/PF/aria-1.1/states_and_properties).
```svelte
```
### a11y\_unknown\_role
```
Unknown role '%role%'
```
```
Unknown role '%role%'. Did you mean '%suggestion%'?
```
Elements with ARIA roles must use a valid, non-abstract ARIA role. A reference to role definitions can be found at [WAI-ARIA](https://www.w3.org/TR/wai-aria/#role_definitions) site.
```svelte
```
### 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
```
### bidirectional\_control\_characters
```
A bidirectional control character was detected in your code. These characters can be used to alter the visual direction of your code and could have unintended consequences
```
Bidirectional control characters can alter the direction in which text appears to be in. For example, via control characters, you can make `defabc` look like `abcdef`. As a result, if you were to unknowingly copy and paste some code that has these control characters, they may alter the behavior of your code in ways you did not intend. See [trojansource.codes](https://trojansource.codes/) for more information.
### 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
```
### css\_unused\_selector
```
Unused CSS selector "%name%"
```
Svelte traverses both the template and the `
```
### custom\_element\_props\_identifier
```
Using a rest element or a non-destructured declaration with `$props()` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the `customElement.props` option.
```
### element\_implicitly\_closed
```
This element is implicitly closed by the following `%tag%`, which can cause an unexpected DOM structure. Add an explicit `%closing%` to avoid surprises.
```
In HTML, some elements are implicitly closed by another element. For example, you cannot nest a `
` inside another `
`:
```html
hello
hello
```
Similarly, a parent element's closing tag will implicitly close all child elements, even if the `` was a typo and you meant to create a *new* element. To avoid ambiguity, it's always a good idea to have an explicit closing tag.
### element\_invalid\_self\_closing\_tag
```
Self-closing HTML tags for non-void elements are ambiguous — use `<%name% ...>%name%>` rather than `<%name% ... />`
```
In HTML, there's [no such thing as a self-closing tag](https://jakearchibald.com/2023/against-self-closing-tags-in-html/). While this *looks* like a self-contained element with some text next to it...
```html
some text!
```
...a spec-compliant HTML parser (such as a browser) will in fact parse it like this, with the text *inside* the icon:
```html
some text!
```
Some templating languages (including Svelte) will 'fix' HTML by turning `
` into `
`. Others adhere to the spec. Both result in ambiguity and confusion when copy-pasting code between different contexts, and as such Svelte prompts you to resolve the ambiguity directly by having an explicit closing tag.
To automate this, run the dedicated migration:
```bash
npx sv migrate self-closing-tags
```
In a future version of Svelte, self-closing tags may be upgraded from a warning to an error.
### event\_directive\_deprecated
```
Using `on:%name%` to listen to the %name% event is deprecated. Use the event attribute `on%name%` instead
```
See [the migration guide](v5-migration-guide#Event-changes) for more info.
### export\_let\_unused
```
Component has unused export property '%name%'. If it is for external reference only, please consider using `export const %name%`
```
### legacy\_code
```
`%code%` is no longer valid — please use `%suggestion%` instead
```
### legacy\_component\_creation
```
Svelte 5 components are no longer classes. Instantiate them using `mount` or `hydrate` (imported from 'svelte') instead.
```
See the [migration guide](v5-migration-guide#Components-are-no-longer-classes) for more info.
### node\_invalid\_placement\_ssr
```
%message%. When rendering this component on the server, the resulting HTML will be modified by the browser (by moving, removing, or inserting elements), 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:
* `
hello
world
` will result in `
hello
world
` (the `
` autoclosed the `
` because `
` cannot contain block-level elements)
* `option a
` will result in `option a ` (the `
` is removed)
* `
` will result in `
` (a `
` 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
```
`%name%` is updated, but is not declared with `$state(...)`. Changing its value will not correctly trigger updates
```
This warning is thrown when the compiler detects the following:
* a variable was declared without `$state` or `$state.raw`
* the variable is reassigned
* the variable is read in a reactive context
In this case, changing the value will not correctly trigger updates. Example:
```svelte
This value updates: {reactive}
This value does not update: {stale}
{
stale = 'updated';
reactive = 'updated';
}}>update
```
To fix this, wrap your variable declaration with `$state`.
### 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
```
### 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
```
### script\_context\_deprecated
```
`context="module"` is deprecated, use the `module` attribute instead
```
```svelte
```
### 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 `` to render parent content is deprecated. Use `{@render ...}` tags instead
```
See [the migration guide](v5-migration-guide#Snippets-instead-of-slots) for more info.
### state\_referenced\_locally
```
This reference only captures the initial value of `%name%`. Did you mean to reference it inside a %type% instead?
```
This warning is thrown when the compiler detects the following:
* A reactive variable is declared
* ...and later reassigned...
* ...and referenced in the same scope
This 'breaks the link' to the original state declaration. For example, if you pass the state to a function, the function loses access to the state once it is reassigned:
```svelte
count++}>
increment
```
```svelte
The count is {count}
```
To fix this, reference the variable such that it is lazily evaluated. For the above example, this can be achieved by wrapping `count` in a function:
```svelte
count++}>
increment
```
```svelte
The count is {+++count()+++}
```
For more info, see [Passing state into functions]($state#Passing-state-into-functions).
### 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
```
### svelte\_component\_deprecated
```
`` 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 `` to re-render when `X` changed, you would either have to use `` or put the component inside a `{#key X}...{/key}` block.
In Svelte 5 this is no longer true — if `X` changes, `` re-renders.
In some cases `` 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:
```svelte
{#each items as item}
--- ---
+++{@const Component = item.condition ? Y : Z}+++
+++ +++
{/each}
```
A derived value may be used in other contexts:
```svelte
--- ---
+++ +++
```
### 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
```
`` is deprecated — use self-imports (e.g. `import %name% from './%basename%'`) instead
```
See [the note in the docs](legacy-svelte-self) for more info.
### unknown\_code
```
`%code%` is not a recognised code
```
```
`%code%` is not a recognised code (did you mean `%suggestion%`?)
```