Skip to main content
SvelteRéférence

Avertissements de compilation

Svelte vous avertit lors de la compilation s’il détecte des erreurs potentielles, comme par exemple du markup non accessible.

Certains warnings peuvent être incorrects dans votre cas d’usage. Vous pouvez désactiver de tels faux positifs en plaçant un commentaire <!-- svelte-ignore <code> --> juste au-dessus de la ligne concernée. Exemple :

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

Vous pouvez lister plusieurs règles dans un seul commentaire (séparées par des virgules), et ajouter une note explicative (entre parenthèses) en complément :

<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions (à cause
de telle ou telle raison) -->
<div onclick>...</div>

a11y_accesskey

Avoid using accesskey

S’assure que l’attribut accessKey ne soit pas utilisé sur un élément. Les “access keys” sont des attributs HTML qui permettent aux développeurs web d’assigner des raccourcis clavier aux éléments. Des conflits entre les raccourcis clavier et les commandes de clavier utilisées par les lecteurs d’écran et les personnes ne se servant que du clavier créent des complications d’accessibilité. Pour éviter ces complication, les attributs accessKeys ne doivent pas être utilisés.

<!-- A11y: Avoid using accesskey -->
<div accesskey="z"></div>

a11y_aria_activedescendant_has_tabindex

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

Un élément avec aria-activedescendant doit être accessible via l’utilisation de la touche Tabulation, il doit donc avoir un tabindex induit ou un attribut tabindex.

<!-- A11y: Elements with attribute aria-activedescendant should have tabindex value -->
<div aria-activedescendant="some-id"></div>

a11y_aria_attributes

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

Certains éléments DOM réservés ne supportent pas les roles, états et propriétés ARIA. C’est souvent le cas car ils ne sont pas visibles, par exemple meta, html, script, style. Cette règle s’assure que ces éléments DOM ne contiennent pas de props aria-*.

<!-- A11y: <meta> should not have aria-* attributes -->
<meta aria-hidden="false" />

a11y_autocomplete_valid

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

a11y_autofocus

Avoid using autofocus

S’assure que autofocus n’est pas utilisé sur des éléments. Utiliser l’autofocus sur des éléments peut engendrer des problèmes d’usage pour les personnes non-voyantes comme mal-voyantes.

<!-- A11y: Avoid using autofocus -->
<input 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

S’assure que les éléments visibles et non interactifs qui possèdent un gestionnaire d’évènement onclick sont accompagnés d’un gestionnaire d’évènement de clavier.

Il est important de se demander si un élément interactif ne serait pas plus approprié, comme un élément <button type="button"> pour des actions ou un élément <a> pour les navigations. Ces éléments ont un sens sémantiquement fort et ont un gestion du clavier intégrée. Par ex. Space et Enter permettent de déclencher un <button> et Enter déclenche un élément <a>.

Si un élément non interactifs est nécessaire, alors onclick doit être accompagné d’un gestionnaire onkeyup ou onkeydown permettant aux utilisateurs et utilisatrices d’effectuer des actions équivalentes au clavier. Pour leur permettre de déclencher un évènement de clavier, l’élément doit être focalisable via un tabindex. Alors qu’un gestionnaire onkeypress permet de ne pas afficher ce warning, il est bon de noter que keypress est déprécié.

<!-- A11y: visible, non-interactive elements with an onclick event must be accompanied by a keyboard event handler. -->
<div onclick={() => {}}></div>

Coder votre application avec l’usage au clavier en tête est important pour les personnes ayant des handicaps physiques leur interdisant l’utilisation de souris, les personnes utilisant des lecteurs d’écran, ainsi que pour la compatibilité AT.

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

S’assure qu’aucun élément “distrayant” ne soit utilisé. Les éléments pouvant être visuellement distrayants peuvent causer des problèmes d’accessibilité pour les personnes ayant des déficits visuels. De tels éléments sont dépréciés, et devraient être évités.

Les éléments suivants sont visuellement distrayants : <marquee> et <blink>.

<!-- A11y: Avoid <marquee> elements -->
<marquee></marquee>

a11y_figcaption_index

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

a11y_figcaption_parent

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

S’assure que certains éléments DOM ont une structure correcte.

<!-- A11y: <figcaption> must be an immediate child of <figure> -->
<div>
	<figcaption>Légende d'image</figcaption>
</div>

a11y_hidden

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

Certains éléments DOM sont utiles pour les lecteurs d’écran et ne devraient pas être cachés.

<!-- A11y: <h2> element should not be hidden -->
<h2 aria-hidden="true">header invisible</h2>

a11y_img_redundant_alt

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

S’assure que l’attribut alt d’une image ne contienne pas les mots “image”, “picture” ou “photo”. Les lecteurs d’écran annoncent déjà les éléments <img> comme étant une image. Il n’y a pas besoin d’utiliser les mots image, photo et/ou picture.

<img src="foo" alt="Foo mange un sandwich" />

<!-- aria-hidden, ne sera pas annoncé par un lecteur d'écran -->
<img src="bar" aria-hidden="true" alt="Photo de moi prenant une image en photo" />

<!-- A11y: Screen readers already announce <img> elements as an image. -->
<img src="foo" alt="Photo de foo en train d'être chelou" />

<!-- A11y: Screen readers already announce <img> elements as an image. -->
<img src="bar" alt="Image de moi au bar !" />

<!-- A11y: Screen readers already announce <img> elements as an image. -->
<img src="foo" alt="Image de baz corrigeant un bug" />

a11y_incorrect_aria_attribute_type

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

S’assure qu’uniquement les types corrects d’une valeur soient utilisés pour les attributs aria. Par exemple, aria-hidden ne devrait uniquement recevoir un booléen.

<!-- A11y: The value of 'aria-hidden' must be exactly one of true or false -->
<div aria-hidden="yes"></div>

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

S’assure que les éléments avec un rôle interactif et des gestionnaires d’évènements interactifs soit focalisables ou accessibles via tabulation.

<!-- A11y: Elements with the 'button' interactive role must have a tabindex value. -->
<div role="button" onkeypress={() => {}} />

a11y_invalid_attribute

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

S’assure que les attributs importants pour l’accessibilité aient une valeur valide. Par exemple, href ne doit pas être vide, ni avoir la valeur '#' ou javascript:.

<!-- A11y: '' is not a valid href attribute -->
<a href="">invalid</a>

a11y_label_has_associated_control

A form label must be associated with a control

S’assure qu’une balise de label ait un texte et un élément de contrôle (input) associé.

Il y a deux manière d’associer un label à un contrôle :

  • Entourer un contrôle d’une balise <label>
  • Ajouter un attribut for à un label et lui assigner l’ID d’un contrôle sur la page
<label for="id">B</label>

<label>C <input type="text" /></label>

<!-- A11y: A form label must be associated with a control. -->
<label>A</label>

a11y_media_has_caption

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

Fournir des sous-titres aux média est essentiel pour que les personnes sourdes puissent en comprendre le contenu. Les sous-titres doivent être une transcription ou traduction du dialogue, des effets sonores, passages musicaux importants et de tout autre information audio pertinente. Ceci n’est pas uniquement important pour l’accessibilité, mais peut aussi être utile pour toutes les personnes pour qui le média n’est pas disponible (comme pour l’attribut alt d’une image lorsque l’image n’a pas pu être chargée correctement).

Les sous-titres doivent contenir toutes les informations importantes et pertinentes permettant la compréhension du média correspondant. Ceci peut signifier que les sous-titres ne soient pas une correspondance 1:1 d’un dialogue dans le contenu du média. Cependant, les sous-titres ne sont pas nécessaires pour les composants vidéo ayant l’attribut muted.

<video><track kind="captions" /></video>

<audio muted></audio>

<!-- A11y: Media elements must have a <track kind=\"captions\"> -->
<video></video>

<!-- A11y: Media elements must have a <track kind=\"captions\"> -->
<video><track /></video>

a11y_misplaced_role

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

Certains éléments DOM réservés ne supportent pas les roles, états et propriétés ARIA. C’est souvent le cas car ils ne sont pas visibles, par exemple meta, html, script, style. Cette règle s’assure que ces éléments DOM ne contiennent pas de props role.

<!-- A11y: <meta> should not have role attribute -->
<meta role="tooltip" />

a11y_misplaced_scope

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

L’attribut scope ne devrait être utilisé que sur des éléments <th>.

<!-- A11y: The scope attribute should only be used with <th> elements -->
<div scope="row" />

a11y_missing_attribute

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

S’assure que les attributs requis pour l’accessibilité sont présent sur un élément. Ceci inclut les vérifications suivantes :

  • <a> doit avoir un href (à moins que ce soit une balise définissant un fragment)
  • <area> devrait avoir alt, aria-label ou aria-labelledby
  • <html> devrait avoir lang
  • <iframe> devrait avoir title
  • <img> devrait avoir alt
  • <object> devrait avoir title, aria-label ou aria-labelledby
  • <input type="image"> devrait avoir alt, aria-label, ou aria-labelledby
<!-- A11y: <input type=\"image\"> element should have an alt, aria-label or aria-labelledby attribute -->
<input type="image" />

<!-- A11y: <html> element should have a lang attribute -->
<html></html>

<!-- A11y: <a> element should have an href attribute -->
<a>text</a>

a11y_missing_content

`<%name%>` element should contain text

S’assure que les éléments d’en-tête (h1, h2, etc...) et les ancres aient du contenu et que ce contenu soit accessible aux lecteurs d’écran.

<!-- A11y: <a> element should have child content -->
<a href="/foo"></a>

<!-- A11y: <h1> element should have child content -->
<h1></h1>

a11y_mouse_events_have_key_events

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

S’assure que onmouseover et onmouseout sont accompagnés de onfocus et onblur, respectivement. Ceci permet de s’assurer que toute fonctionnalité déclenchée par ces évènements de souris est aussi accessible pour les utilisateurs et utilisatrices de clavier.

<!-- A11y: onmouseover must be accompanied by onfocus -->
<div onmouseover={handleMouseover} />

<!-- A11y: onmouseout must be accompanied by onblur -->
<div onmouseout={handleMouseout} />

a11y_no_abstract_role

Abstract role '%role%' is forbidden

a11y_no_interactive_element_to_noninteractive_role

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

Les rôles WAI-ARIA ne devraient pas être utilisés pour convertir un élément interactif en élément non interactif. Les rôles ARIA non interactifs incluent article, banner, complementary, img, listitem, main, region, et tooltip.

<!-- A11y: <textarea> cannot have role 'listitem' -->
<textarea role="listitem"></textarea>

a11y_no_noninteractive_element_interactions

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

Un élément non interactif n’est pas capable de gérer des gestionnaires d’évènements (clavier ou souris). Les éléments non interactifs incluent <main>, <area>, <h1> (,<h2>, etc), <p>, <img>, <li>, <ul> et <ol>. Les rôles WAI-ARIA incluent article, banner, complementary, img, listitem, main, region and tooltip.

<!-- `A11y: Non-interactive element <li> should not be assigned mouse or keyboard event listeners.` -->
<li onclick={() => {}}></li>

<!-- `A11y: Non-interactive element <div> should not be assigned mouse or keyboard event listeners.` -->
<div role="listitem" onclick={() => {}}></div>

a11y_no_noninteractive_element_to_interactive_role

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

Les rôles WAI-ARIA ne devraient pas être utilisés pour convertir un élément non interactif en élément interactif. Les rôles ARIA interactifs incluent button, link, checkbox, menuitem, menuitemcheckbox, menuitemradio, option, radio, searchbox, switch et textbox.

<!-- A11y: Non-interactive element <h3> cannot have interactive role 'searchbox' -->
<h3 role="searchbox">Button</h3>

a11y_no_noninteractive_tabindex

noninteractive element cannot have nonnegative tabIndex value

La navigation utilisant la touche Tab devrait être limitée aux éléments de la page permettant une interaction.

<!-- A11y: noninteractive element cannot have nonnegative tabIndex value -->
<div tabindex="0"></div>

a11y_no_redundant_roles

Redundant role '%role%'

Certains élément HTML ont des rôles ARIA par défaut. Donner à ces éléments un rôle déjà défini par le navigateur n’a pas d’effet et est redondant.

<!-- A11y: Redundant role 'button' -->
<button role="button">...</button>

<!-- A11y: Redundant role 'img' -->
<img role="img" src="foo.jpg" />

a11y_no_static_element_interactions

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

Les éléments comme <div> avec des gestionnaires d’évènement interactif comme click doivent avoir un rôle ARIA.

<!-- A11y: <div> with click handler must have an ARIA role -->
<div onclick={() => ''}></div>

a11y_positive_tabindex

Avoid tabindex values above zero

Évitez les valeurs positives pour la propriété tabindex. Ceci va déplacer les éléments hors de l’ordre de tabulation attendu, créant ainsi de la confusion pour les personnes utilisant un clavier.

<!-- A11y: avoid tabindex values above zero -->
<div tabindex="1"></div>

a11y_role_has_required_aria_props

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

Les éléments ayant un rôle ARIA doivent avoir tous les attributs requis par ce rôle.

<!-- A11y: A11y: Elements with the ARIA role "checkbox" must have the following attributes defined: "aria-checked" -->
<span role="checkbox" aria-labelledby="foo" tabindex="0"></span>

a11y_role_supports_aria_props

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

Les éléments avec un rôle explicite ou implicite ne peuvent avoir que des propriétés aria-* supportées par ce rôle.

<!-- A11y: The attribute 'aria-multiline' is not supported by the role 'link'. -->
<div role="link" aria-multiline></div>

<!-- A11y: The attribute 'aria-required' is not supported by the role 'listitem'. This role is implicit on the element <li>. -->
<li aria-required></li>

a11y_role_supports_aria_props_implicit

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

Les éléments avec un rôle explicite ou implicite ne peuvent avoir que des propriétés aria-* supportées par ce rôle.

<!-- A11y: The attribute 'aria-multiline' is not supported by the role 'link'. -->
<div role="link" aria-multiline></div>

<!-- A11y: The attribute 'aria-required' is not supported by the role 'listitem'. This role is implicit on the element <li>. -->
<li aria-required></li>

a11y_unknown_aria_attribute

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

S’assure qu’uniquement les attributs ARIA connus sont utilisés. Ceci se base sur la spécification WAI-ARIA States and Properties.

<!-- A11y: Unknown aria attribute 'aria-labeledby' (did you mean 'labelledby'?) -->
<input type="image" aria-labeledby="foo" />

a11y_unknown_role

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

Les éléments avec des rôles ARIA doivent avoi un rôle valide et non abstrait. Vous pouvez trouver une référence des définitions de rôles sur le site de WAI-ARIA.

<!-- A11y: Unknown role 'toooltip' (did you mean 'tooltip'?) -->
<div role="toooltip"></div>

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

css_unused_selector

Unused CSS selector "%name%"

Svelte traverse à la fois le template et la balise <style> pour trouver les sélecteurs CSS non utilisés dans le template, afin de les supprimer.

Dans certains cas, un sélecteur peut cibler un élément qui n’est pas “visible” par le compilateur, par exemple car il fait partie d’une balise {@html ...} ou parce que vous surcharger les styles dans un composant enfant. Dans ces cas-là, utilisez :global pour laisser le sélecteur intact :

<div class="post">{@html content}</div>

<style>
  .post :global {
	p {...}
  }
</style>

element_invalid_self_closing_tag

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

En HTML, le concept de balise auto-fermante n’existe pas. Même si ceci ressemble à une balise sans contenu avec du texte à côté...

<div>
	<span class="icon" /> du texte !
</div>

... un parser respectant la spec HTML (un navigateur par exemple) va en réalité le traduire comme ceci, avec le texte à l’intérieur de l’icône :

<div>
	<span class="icon"> du texte ! </span>
</div>

Certains langages de templatings (Svelte inclus) vont “corriger” le HTML en transformant <span /> en <span></span>. D’autres respectent la spec. Dans les deux cas, il en résulte une ambiguité et de la confusion lorsque vous copiez-collez du code entre différents contextes. En conséquence, Svelte vous avertit de l’ambiguité pour que vous la résolviez directement en rajoutant la balise fermante.

Pour automatiser ceci, lancer la commande de migration dédiée :

npx sv migrate self-closing-tags

Dans une version future de Svelte, les balises auto-fermantes vont probablement déclencher une erreur plutôt qu’un warning.

event_directive_deprecated

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

Voir le guide de migration pour plus d’infos.

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.

Voir le guide de migration pour plus d’infos.

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

Le HTML restreint les positions autorisées de certains éléments. S’il rencontre des éléments mal positionnés, le navigateur va “réparer” le HTML d’une manière qui invalide les suppositions que Svelte fait à propos de la structure de vos composants. Par exemple :

  • <p>hello <div>world</div></p> va être changé en <p>hello</p><div>world</div><p></p> (la balise <div> ferme automatiquement <p> car les <p> ne peuvent pas contenir d’éléments de type bloc)
  • <option><div>option a</div></option> va devenir <option>option a</option> (le <div> est supprimé)
  • <table><tr><td>cell</td></tr></table> est transformé en <table><tbody><tr><td>cell</td></tr></tbody></table> (une balise <tbody> est ajouté automatiquement)

Ce code fonctionnera lorsque le composant sera rendu sur le client (ce qui explique pourquoi ceci est un warning et non une erreur), mais si vous utilisez du rendu côté serveur, ceci va empêcher l’hydration de se faire correctement.

non_reactive_update

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

Ce warning est levé lorsque le compilateur détecte les choses suivantes :

  • une variable a été déclarée sans $state ou $state.raw
  • une variable a été réassignée
  • la variable est lue dans un contexte réactif

Dans ces cas-là, changer la valeur ne va pas correctement déclencher de mise à jour. Exemple :

<script>
	let reactive = $state('réactif');
	let stale = 'périmé';
</script>

<p>Cette valeur se met à jour : {reactive}</p>
<p>Cette valeur ne se met pas à jour : {stale}</p>

<button onclick={() => {
	stale = 'mis à jour';
	reactive = 'mis à jour';
}}>mettre à jour</button>

Pour corriger cela, entourez votre déclaration de variable avec $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
<script context="module" module>
	let foo = 'bar';
</script>

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

Voir le guide de migration pour plus d’infos.

state_referenced_locally

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

Ce warning est levé lorsque le compilateur détecte les choses suivantes :

  • une variable réactive a été déclarée
  • la variable a été réassignée
  • la variable est référencée dans le même scope où elle a été déclarée et il s’agit d’un contexte non réactif

Dans ce cas, la réassignation de l’état ne sera pas détectée quel que soit ce que vous fournissez. Par exemple, si vous fournissez l’état à une fonction, cette fonction ne va pas détecter la mise à jour :

Parent
<script>
	import { setContext } from 'svelte';

	let count = $state(0);

	// warning: state_referenced_locally
	setContext('count', count);
</script>

<button onclick={() => count++}>
	incrémenter
</button>
<script lang="ts">
	import { setContext } from 'svelte';

	let count = $state(0);

	// warning: state_referenced_locally
	setContext('count', count);
</script>

<button onclick={() => count++}>
	incrémenter
</button>
Child
<script>
	import { getContext } from 'svelte';

	const count = getContext('count');
</script>

<!-- Ceci ne sera jamais mis à jour -->
<p>Le compteur vaut {count}</p>
<script lang="ts">
	import { getContext } from 'svelte';

	const count = getContext('count');
</script>

<!-- Ceci ne sera jamais mis à jour -->
<p>Le compteur vaut {count}</p>

Pour corriger cela, référencer la variable de sorte qu’elle soit évaluée au moment de la compilation. Pour l’exemple ci-dessus, vous pouvez faire cela en plaçant count dans une fonction :

Parent
<script>
	import { setContext } from 'svelte';

	let count = $state(0);
	setContext('count', () => count);
</script>

<button onclick={() => count++}>
	incrémenter
</button>
<script lang="ts">
	import { setContext } from 'svelte';

	let count = $state(0);
	setContext('count', () => count);
</script>

<button onclick={() => count++}>
	incrémenter
</button>
Child
<script>
	import { getContext } from 'svelte';

	const count = getContext('count');
</script>

<!-- Ceci va se mettre à jour -->
<p>Le compteur vaut {count()}</p>
<script lang="ts">
	import { getContext } from 'svelte';

	const count = getContext('count');
</script>

<!-- Ceci va se mettre à jour -->
<p>Le compteur vaut {count()}</p>

Pour plus d’infos, voir Passer de l’état à des fonctions.

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

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

Dans des versions antérieures de Svelte, le constructeur de composant était figé au moment du rendu du composant. En d’autres termes, si vous souhaitiez que <X> soit re-rendu si X était mis à jour, vous deviez soit utiliser <svelte:component this={X}>, soit mettre le composant dans un bloc {#key X}...{/key}.

Avec Svelte 5 ce n’est plus le cas — si X change, <X> est re-rendu.

Dans certains cas la syntaxe <object.property> peut être également utilisée ; une variable dont le nom est en minuscules et possédant des propriétés est considérée comme un composant par Svelte 5.

Dans le cas de logiques de résolution de composant complexes, une variable intermédiaire dont la première lettre est en majuscules peut être nécessaire. Par ex. dans les situations où @const est utilisé :

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

Une valeur dérivée peut être utilisée dans d’autres contextes :

<script>
	// ...
	let condition = $state(false);
	const Component = $derived(condition ? Y : Z);
</script>

<svelte:component this={condition ? Y : Z} />
<Component />

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

Voir la note dans la doc pour plus d’infos.

unknown_code

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

Modifier cette page sur Github

précédent suivant
Erreurs de compilation