mirror of https://github.com/sveltejs/svelte
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
518 lines
12 KiB
518 lines
12 KiB
---
|
|
title: 'Compiler Warnings'
|
|
generated: '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
|
|
```
|
|
|
|
```diff
|
|
<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:
|
|
```diff
|
|
{#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
|
|
```
|