Svelte参考

‘运行时错误’

客户端错误(Client errors)

¥Client errors

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

%parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5

请参阅迁移指南了解更多信息。

¥See the migration guide 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 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_local_read

Reading state that was created inside the same derived is forbidden. Consider using `untrack` to read locally created state

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`

服务器错误(Server errors)

¥Server errors

lifecycle_function_unavailable

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

某些方法（如 mount）在服务器上下文中运行时无法调用。避免预调用它们，即不在渲染期间调用。

¥Certain methods such as mount cannot be invoked while running in a server context. Avoid calling them eagerly, i.e. not during render.

共享错误(Shared errors)

¥Shared errors

invalid_default_snippet

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

此错误将在以下设置中抛出：

¥This error would be thrown in a setup like this:

Parent

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

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>

这里，List.svelte 正在使用 {@render children(item)，这意味着它期望 Parent.svelte 使用片段。相反，Parent.svelte 使用已弃用的 let: 指令。这种 API 组合不兼容，因此出现错误。

¥Here, List.svelte is using {@render children(item) which means it expects Parent.svelte to use snippets. Instead, Parent.svelte uses the deprecated let: directive. This combination of APIs is incompatible, hence the error.

lifecycle_outside_component

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

某些生命周期方法只能在组件初始化期间使用。要修复此问题，请确保你在组件实例脚本的顶层内调用该方法。

¥Certain lifecycle methods can only be used during component initialisation. To fix this, make sure you’re invoking the method inside the top level of the instance script of your component.

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

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

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

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

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

‘编译器警告’ ‘运行时警告’