## Erreurs client [!VO]Client errors

<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->

### bind_invalid_checkbox_value

```
Using `bind:value` together with a checkbox input is not allowed. Use `bind:checked` instead
```

### bind_invalid_export

```
Component %component% has an export named `%key%` that a consumer component is trying to access using `bind:%key%`, which is disallowed. Instead, use `bind:this` (e.g. `<%name% bind:this={component} />`) and then access the property on the bound component instance (e.g. `component.%key%`)
```

### bind_not_bindable

```
A component is attempting to bind to a non-bindable property `%key%` belonging to %component% (i.e. `<%name% bind:%key%={...}>`). To mark a property as bindable: `let { %key% = $bindable() } = $props()`
```

### component_api_changed

```
Calling `%method%` on a component instance (of %component%) is no longer valid in Svelte 5
```

See the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.

### component_api_invalid_new

```
Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working.
```

See the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.

### derived_references_self

```
A derived value cannot reference itself recursively
```

### each_key_duplicate

```
Keyed each block has duplicate key at indexes %a% and %b%
```

```
Keyed each block has duplicate key `%value%` at indexes %a% and %b%
```

### effect_in_teardown

```
`%rune%` cannot be used inside an effect cleanup function
```

### effect_in_unowned_derived

```
Effect cannot be created inside a `$derived` value that was not itself created inside an effect
```

### effect_orphan

```
`%rune%` can only be used inside an effect (e.g. during component initialisation)
```

### effect_update_depth_exceeded

```
Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops
```

### hydration_failed

```
Failed to hydrate the application
```

### invalid_snippet

```
Could not `{@render}` snippet due to the expression being `null` or `undefined`. Consider using optional chaining `{@render snippet?.()}`
```

### lifecycle_legacy_only

```
`%name%(...)` cannot be used in runes mode
```

### props_invalid_value

```
Cannot do `bind:%key%={undefined}` when `%key%` has a fallback value
```

### props_rest_readonly

```
Rest element properties of `$props()` such as `%property%` are readonly
```

### rune_outside_svelte

```
The `%rune%` rune is only available inside `.svelte` and `.svelte.js/ts` files
```

### state_descriptors_fixed

```
Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`.
```

### state_prototype_fixed

```
Cannot set prototype of `$state` object
```

### state_unsafe_mutation

```
Updating state inside a derived or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
```

Cette erreur se produit lorsqu'un état est mis à jour pendant l'évaluation d'un `$derived`. Vous
pourriez la rencontrer alors que vous essayez de "dériver" deux morceaux d'état en une seule fois :

```svelte
<script>
	let count = $state(0);

	let even = $state(true);

	let odd = $derived.by(() => {
		even = count % 2 === 0;
		return !even;
	});
</script>

<button onclick={() => count++}>{count}</button>

<p>{count} est pair : {even}</p>
<p>{count} est impair : {odd}</p>
```

Ceci est interdit car cela introduit de l'instabilité : si `<p>{count} est pair : {even}</p>` est
mis à jour avant que `odd` ne soit recalculé, `even` sera périmé. Dans la plupart des cas, la
solution est de tout dériver :

```js
let count = 0;
// ---cut---
let even = $derived(count % 2 === 0);
let odd = $derived(!even);
```

Si les effets de bord sont inévitable, utilisez plutôt [`$effect`]($effect).


## Erreurs serveur [!VO]Server errors

<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->

### lifecycle_function_unavailable

```
`%name%(...)` is not available on the server
```

Certaines méthodes comme  `mount` ne peuvent pas être invoquées lorsqu'exécutées dans un contexte
serveur. Évitez de les appeler immédiatement, c'est-à-dire pas pendant le rendu.


## Erreurs client et serveur [!VO]Shared errors

<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->

### invalid_default_snippet

```
Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead
```

Cette erreur serait levée dans une situation comme celle-ci :

```svelte
<!--- file: Parent.svelte --->
<List {items} let:entry>
    <span>{entry}</span>
</List>
```

```svelte
<!--- file: List.svelte --->
<script>
    let { items, children } = $props();
</script>

<ul>
    {#each items as item}
        <li>{@render children(item)}</li>
    {/each}
</ul>
```

Ici, `List.svelte` utilise `{@render children(item)}`, ce qui signifie qu'elle attend
`Parent.svelte` pour utiliser des snippets. Mais en réalité `Parent.svelte` utilise la directive
`let:`, qui est dépréciée. Cette combinaison d'APIs est incompatible, d'où l'erreur.

### invalid_snippet_arguments

```
A snippet function was passed invalid arguments. Snippets should only be instantiated via `{@render ...}`
```

### lifecycle_outside_component

```
`%name%(...)` can only be used during component initialisation
```

Certaines méthodes de cycle de vie ne peuvent être utilisées que lors de l'initialisation d'un
composant. Pour corriger ça, assurez-vous d'invoquer la méthode à la _racine du script de
l'instance_ de votre composant.

```svelte
<script>
    import { onMount } from 'svelte';

    function handleClick() {
				// ceci est mauvais
        onMount(() => {})
    }

		// ceci est bon
    onMount(() => {})
</script>

<button onclick={handleClick}>cliquez moi</button>
```

### snippet_without_render_tag

```
Attempted to render a snippet without a `{@render}` block. This would cause the snippet code to be stringified instead of its content being rendered to the DOM. To fix this, change `{snippet}` to `{@render snippet()}`.
```

Un composant qui jette cette erreur va ressembler à ça (`children` n'est pas rendu)...

```svelte
<script>
    let { children } = $props();
</script>

{children}
```

... ou à ça (un composant parent fournit un snippet là où une valeur non-snippet est attendue) :

```svelte
<!--- file: Parent.svelte --->
<ChildComponent>
  {#snippet label()}
    <span>Salut !</span>
  {/snippet}
</ChildComponent>
```

```svelte
<!--- file: Child.svelte --->
<script>
  let { label } = $props();
</script>

<!-- Ce composant n'attend pas un snippet, mais le parent en fournit un -->
<p>{label}</p>
```

### store_invalid_shape

```
`%name%` is not a store with a `subscribe` method
```

### svelte_element_invalid_this_value

```
The `this` prop on `<svelte:element>` must be a string, if defined
```