‘运行时错误’

Cannot create a `$derived(...)` with an `await` expression outside of an effect tree

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

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%`)

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()`

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

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.

A derived value cannot reference itself recursively

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

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

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

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

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

`$effect.pending()` can only be called inside an effect or derived

Maximum update depth exceeded. This typically indicates that an effect reads and writes the same piece of state

let let count: numbercount = 
function $state<0>(initial: 0): 0 (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
https://svelte.dev/docs/svelte/$state
@paraminitial The initial value$state(0);

function $effect(fn: () => void | (() => void)): void
namespace $effect
Runs code when a component is mounted to the DOM, and then whenever its dependencies change, i.e. $state or $derived values.
The timing of the execution is after the DOM has been updated.
Example:
$effect(() => console.log('The count is now ' + count));
If you return a function from the effect, it will be called right before the effect is run again, or when the component is unmounted.
Does not run during server-side rendering.
https://svelte.dev/docs/svelte/$effect
@paramfn The function to execute$effect(() => {
	// this both reads and writes `count`,
	// so will run in an infinite loop
	let count: numbercount += 1;
});

let let array: string[]array = 
function $state<string[]>(initial: string[]): string[] (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
https://svelte.dev/docs/svelte/$state
@paraminitial The initial value$state(['hello']);

function $effect(fn: () => void | (() => void)): void
namespace $effect
Runs code when a component is mounted to the DOM, and then whenever its dependencies change, i.e. $state or $derived values.
The timing of the execution is after the DOM has been updated.
Example:
$effect(() => console.log('The count is now ' + count));
If you return a function from the effect, it will be called right before the effect is run again, or when the component is unmounted.
Does not run during server-side rendering.
https://svelte.dev/docs/svelte/$effect
@paramfn The function to execute$effect(() => {
	let array: string[]array.Array<string>.push(...items: string[]): 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('goodbye');
});

function $effect(fn: () => void | (() => void)): void
namespace $effect
Runs code when a component is mounted to the DOM, and then whenever its dependencies change, i.e. $state or $derived values.
The timing of the execution is after the DOM has been updated.
Example:
$effect(() => console.log('The count is now ' + count));
If you return a function from the effect, it will be called right before the effect is run again, or when the component is unmounted.
Does not run during server-side rendering.
https://svelte.dev/docs/svelte/$effect
@paramfn The function to execute$effect(() => {
	// this is okay, because sorting an already-sorted array
	// won't result in a mutation
	let array: string[]array.Array<string>.sort(compareFn?: ((a: string, b: string) => number) | undefined): string[]
Sorts an array in place.
This method mutates the array and returns a reference to the same array.
@paramcompareFn Function used to determine the order of the elements. It is expected to return
a negative value if the first argument is less than the second argument, zero if they're equal, and a positive
value otherwise. If omitted, the elements are sorted in ascending, UTF-16 code unit order.
ts [11,2,22,1].sort((a, b) => a - b) sort();
});

Cannot use `fork(...)` unless the `experimental.async` compiler option is `true`

Cannot use `flushSync` inside an effect

Cannot commit a fork that was already discarded

Cannot create a fork inside an effect or when state changes are pending

`getAbortSignal()` can only be called inside an effect or derived

Failed to hydrate the application

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

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

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

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

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

`setContext` must be called when a component first initializes, not in a subsequent effect or after an `await` expression

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

Cannot set prototype of `$state` object

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

<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} is even: {even}</p>
<p>{count} is odd: {odd}</p>

let let even: booleaneven = 
function $derived<boolean>(expression: boolean): boolean
namespace $derived
Declares derived state, i.e. one that depends on other state variables.
The expression inside $derived(...) should be free of side-effects.
Example:
let double = $derived(count * 2);
https://svelte.dev/docs/svelte/$derived
@paramexpression The derived state expression$derived(let count: numbercount % 2 === 0);
let let odd: booleanodd = 
function $derived<boolean>(expression: boolean): boolean
namespace $derived
Declares derived state, i.e. one that depends on other state variables.
The expression inside $derived(...) should be free of side-effects.
Example:
let double = $derived(count * 2);
https://svelte.dev/docs/svelte/$derived
@paramexpression The derived state expression$derived(!let even: booleaneven);

A `<svelte:boundary>` `reset` function cannot be called while an error is still being handled

<svelte:boundary onerror={async (error, reset) => {
	fixTheError();
	await tick();
	reset();
}}>

</svelte:boundary>

Encountered asynchronous work while rendering synchronously.

The `html` property of server render results has been deprecated. Use `body` instead.

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

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

<List {items} let:entry>
	<span>{entry}</span>
</List>

<script>
	let { items, children } = $props();
</script>

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

<script lang="ts">
	let { items, children } = $props();
</script>

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

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

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

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

	function handleClick() {
		// This is wrong
		onMount(() => {})
	}

	// This is correct
	onMount(() => {})
</script>

<button onclick={handleClick}>click me</button>

Context was not set in a parent component

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()}`.

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

{children}

<ChildComponent>
  {#snippet label()}
	<span>Hi!</span>
  {/snippet}
</ChildComponent>

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

<!-- This component doesn't expect a snippet, but the parent provided one -->
<p>{label}</p>

<script lang="ts">
  let { label } = $props();
</script>

<!-- This component doesn't expect a snippet, but the parent provided one -->
<p>{label}</p>

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

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