Skip to main content
SvelteRéférence

Warnings d’exécution

Warnings client

assignment_value_stale

Assignment to `%property%` property (%location%) will evaluate to the right-hand side, not the value of `%property%` following the assignment. This may result in unexpected behaviour.

Étant donné le cas suivant...

<script>
	let object = $state({ array: null });

	function add() {
		(object.array ??= []).push(object.array.length);
	}
</script>

<button onclick={add}>ajouter</button>
<p>éléments : {JSON.stringify(object.items)}</p>

... le tableau dans lequel on ajoute des éléments lorsque le bouton est cliqué pour la première fois est le [] à droite de l’assignation, mais la valeur résultante de object.array est un proxy d’état vide. En conséquence, la valeur ajoutée est ignorée.

Vous pouvez corriger cela en séparant le code en deux morceaux :

function function add(): voidadd() {
	
let object: {
    array: number[];
}
object.array: number[]array ??= [];
	
let object: {
    array: number[];
}
object.array: number[]array.Array<number>.push(...items: number[]): number
Appends new elements to the end of an array, and returns the new length of the array.


@paramitems New elements to add to the array.
push(
let object: {
    array: number[];
}
object.array: number[]array.Array<number>.length: number
Gets or sets the length of the array. This is a number one higher than the highest index in the array.


length);
}

binding_property_non_reactive

`%binding%` is binding to a non-reactive property
`%binding%` (%location%) is binding to a non-reactive property

console_log_state

Your `console.%method%` contained `$state` proxies. Consider using `$inspect(...)` or `$state.snapshot(...)` instead

Lorsque vous loggez un proxy, les outils développeur du navigateur vont logger le proxy lui-même plutôt que la valeur qu’il représente. Dans le cas de Svelte, la “cible” d’un proxy de $state peut ne pas ressembler à sa valeur courante, ce qui peut prêter à confusion.

La manière la plus simple de logger une valeur lorsqu’elle évolue est d’utiliser la rune $inspect. Autrement, si vous souhaitez logger des choses une seule fois (par exemple au sein d’un gestionnaire d’évènement), vous pouvez utiliser $state.snapshot pour prendre un instantané de la valeur courante.

event_handler_invalid

%handler% should be a function. Did you mean to %suggestion%?

hydration_attribute_changed

The `%attribute%` attribute on `%html%` changed its value between server and client renders. The client value, `%value%`, will be ignored in favour of the server value

Certains attributs comme src sur un élément <img> ne seront pas réparés lors de l’hydration, c-à-d que la valeur du serveur sera conservée. Ceci s’explique par le fait que mettre à jour ces attributs peut déclencher le re-téléchargement de l’image (ou, dans le cas d’une <iframe>, le rechargement de l’iframe), même s’ils pointent vers la même ressource.

Pour corriger ça, vous pouvez soit ignorer le warning avec un commentaire svelte-ignore, soit vous assurez que la valeur soit la même entre le serveur et le client. Si vous avez vraiment besoin que la valeur soit changée pendant l’hydration, vous pouvez forcer sa mise à jour comme ceci :

<script>
	let { src } = $props();

	if (typeof window !== 'undefined') {
		// enregistrer la valeur...
		const initial = src;

		// mettre la variable à undefined...
		src = undefined;

		$effect(() => {
			// .. et la re définir après le montage
			src = initial;
		});
	}
</script>

<img {src} />

hydration_html_changed

The value of an `{@html ...}` block changed between server and client renders. The client value will be ignored in favour of the server value
The value of an `{@html ...}` block %location% changed between server and client renders. The client value will be ignored in favour of the server value

Si la valeur de {@html ...} change entre le serveur et le client, elle ne sera pas réparée lors de l’hydratation, c-à-d que la valeur du serveur sera conservée. Ceci s’explique par le fait que détecter des changements lors de l’hydratation coûte cher et est souvent inutile.

Pour corriger ça, vous pouvez soit ignorer le warning avec un commentaire svelte-ignore, soit vous assurez que la valeur soit la même entre le serveur et le client. Si vous avez vraiment besoin que la valeur soit changée pendant l’hydration, vous pouvez forcer sa mise à jour comme ceci :

<script>
	let { markup } = $props();

	if (typeof window !== 'undefined') {
		// enregistrer la valeur...
		const initial = markup;

		// mettre la variable à undefined...
		markup = undefined;

		$effect(() => {
			// .. et la re définir après le montage
			markup = initial;
		});
	}
</script>

{@html markup}

hydration_mismatch

Hydration failed because the initial UI does not match what was rendered on the server
Hydration failed because the initial UI does not match what was rendered on the server. The error occurred near %location%

Ce warning est levé lorsque Svelte rencontre une erreur lors de l’hydratation du HTML provenant du serveur. Pendant l’hydratation, Svelte parcourt le DOM avec une certaine structure comme objectif. Si cette structure est différente de l’objectif (par exemple parce que le HTML a été réparé par le DOM à cause de HTML invalide), alors Svelte risque de rencontrer des problèmes, ce qui justifie ce warning.

Pendant le développement, cette erreur est souvent précédée d’un console.error détaillant le HTML problématique, et qui nécessite d’être réparé.

invalid_raw_snippet_render

The `render` function passed to `createRawSnippet` should return HTML for a single element

legacy_recursive_reactive_block

Detected a migrated `$:` reactive block in `%filename%` that both accesses and updates the same reactive value. This may cause recursive updates when converted to an `$effect`.

lifecycle_double_unmount

Tried to unmount a component that was not mounted

ownership_invalid_binding

%parent% passed a value to %child% with `bind:`, but the value is owned by %owner%. Consider creating a binding between %owner% and %parent%

Imagingez trois composants GrandParent, Parent et Child. Si vous écrivez <GrandParent bind:value>, passez la variable dans GrandParent via <Parent {value} /> (notez l’absence de bind:), puis écrivez <Child bind:value> dans Parent, ce warning est levé.

Pour corriger ça, utiliser bind: sur la valeur plutôt que simplement passer la propriété (c-à-d dans cet exemple, écrivez <Parent bind:value />).

ownership_invalid_mutation

Mutating a value outside the component that created it is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
%component% mutated a value owned by %owner%. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead

Considérer le code suivant :

App
<script>
	import Child from './Child.svelte';
	let person = $state({ name: 'Florida', surname: 'Man' });
</script>

<Child {person} />
<script lang="ts">
	import Child from './Child.svelte';
	let person = $state({ name: 'Florida', surname: 'Man' });
</script>

<Child {person} />
Child
<script>
	let { person } = $props();
</script>

<input bind:value={person.name}>
<input bind:value={person.surname}>
<script lang="ts">
	let { person } = $props();
</script>

<input bind:value={person.name}>
<input bind:value={person.surname}>

Child mute la valeur de person, qui appartient à App, sans être explicitement “autorisé” à le faire. Ceci est fortement déconseillé car cela peut engendrer du code difficile à comprendre à grande échelle (“qui a muté cette valeur ?”), d’où le warning.

Pour corriger ça, vous pouvez soit créer une prop de callback pour communiquer les changements, ou alors définir person comme $bindable.

state_proxy_equality_mismatch

Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results

$state(...) crée un proxy de la valeur fournie. Le proxy est la valeur ont des identités différentes, ce qui implique que les vérifications d’égalité donneront toujours false :

<script>
	let value = { foo: 'bar' };
	let proxy = $state(value);

	value === proxy; // toujours false
</script>

Pour contourner ce problème, assurez-vous de toujours comparer des valeurs qui ont soit toutes les deux été créées avec $state(...), soit toutes les deux pas. Notez que $state.raw(...) ne va pas créer de proxy d’état.

transition_slide_display

The `slide` transition does not work correctly for elements with `display: %value%`

La transition slide fonctionne en animant la hauteur height de l’élément, ce qui requiert un style display de type block, flex ou grid. Cela ne fonctionne pas pour les élément avec :

  • display: inline (le défaut pour les éléments comme <span>), et toutes ses variantes comme inline-block, inline-flex et inline-grid
  • display: table et table-[name], qui sont les défauts des éléments comme <table> et <tr>
  • display: contents

Warnings client et serveur

dynamic_void_element_content

`<svelte:element this="%tag%">` is a void element — it cannot have content

Les éléments tels que <input> ne peuvent pas avoir de contenu, tout enfant passé à ces éléments sera ignoré.

state_snapshot_uncloneable

Value cannot be cloned with `$state.snapshot` — the original value was returned
The following properties cannot be cloned with `$state.snapshot` — the return value contains the originals:

%properties%

$state.snapshot essaye de clone la valeur fournie afin de renvoyer une référence qui ne changera plus. Certains objets peuvent ne pas être clonables, auquel cas la valeur originale est renvoyée. Dans l’exemple suivant, property est cloné, mais window ne l’est pas, car les éléments du DOM ne peuvent pas être clonés :

const 
const object: {
    property: string;
    window: Window & typeof globalThis;
}
object = 
function $state<{
    property: string;
    window: Window & typeof globalThis;
}>(initial: {
    property: string;
    window: Window & typeof globalThis;
}): {
    property: string;
    window: Window & typeof globalThis;
} (+1 overload)
namespace $state
Declares reactive state.


Example:


let count = $state(0);
https://svelte.dev/docs/svelte/$state


@paraminitial The initial value
$state({ property: stringproperty: 'ceci est clonable', window: Window & typeof globalThiswindow })
const 
const snapshot: {
    property: string;
    window: {
        [x: number]: {
 [x: number]: ...;
 readonly clientInformation: {
   readonly clipboard: {
       read: {};
       readText: {};
       write: {};
       writeText: {};
       addEventListener: {};
       dispatchEvent: {};
       removeEventListener: {};
   };
   ... 41 more ...;
   readonly storage: {
       ...;
   };
 };
 ... 207 more ...;
 readonly sessionStorage: {
   ...;
 };
        };
        ... 921 more ...;
        undefined: undefined;
    };
}
snapshot = 
namespace $state
function $state<T>(initial: T): T (+1 overload)
Declares reactive state.


Example:


let count = $state(0);
https://svelte.dev/docs/svelte/$state


@paraminitial The initial value
$state.
function $state.snapshot<{
    property: string;
    window: Window & typeof globalThis;
}>(state: {
    property: string;
    window: Window & typeof globalThis;
}): {
    property: string;
    window: {
        ...;
    };
}
To take a static snapshot of a deeply reactive $state proxy, use $state.snapshot:


Example:


&#x3C;script>
  let counter = $state({ count: 0 });

  function onclick() {
	// Will log `{ count: ... }` rather than `Proxy { ... }`
	console.log($state.snapshot(counter));
  };
&#x3C;/script>
https://svelte.dev/docs/svelte/$state#$state.snapshot


@paramstate The value to snapshot
snapshot(
const object: {
    property: string;
    window: Window & typeof globalThis;
}
object);

Modifier cette page sur Github

précédent suivant
Erreurs d’exécution