Skip to main content
SvelteReference

Runtime warnings

客户警告

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.

给定一个这样的案例...

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

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

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

...當按鈕第一次被點擊時，推送到的數組是作業右側的 []，但 object.array 的結果是一個空狀態代理。因此，推送的值將被丟棄。

您可以通过将其分为两个语句来修复此问题：

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);
}

await_reactivity_loss

Detected reactivity loss when reading `%name%`. This happens when state is read in an async function after an earlier `await`

Svelte 的基于信号的响应性是通过跟踪模板或$derived(...)表达式执行时读取哪些状态位来工作的。如果一个表达式包含一个await，Svelte 会将其转换，以便跟踪await之后的任何状态之后——换句话说，在这种情况下……

let let total: numbertotal = 
function $derived<number>(expression: number): number
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(await let a: Promise<number>a + let b: numberb);

...两个a和b都被跟踪，即使b只在a解决后读取一次，在初始执行之后。

这并不适用于表达式内部不可见的 await。在这种情况下...

async function function sum(): Promise<number>sum() {
	return await let a: Promise<number>a + let b: numberb;
}

let let total: numbertotal = 
function $derived<number>(expression: number): number
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(await function sum(): Promise<number>sum());

...total 将取决于 a（立即读取）但不取决于 b（不读取）。解决方案是将值传递给函数：

/**
 * @param {Promise<number>} a
 * @param {number} b
 */
async function function sum(a: Promise<number>, b: number): Promise<number>
@parama 
@paramb 
sum(a: Promise<number>
@parama 
a, b: number
@paramb 
b) {
	return await a: Promise<number>
@parama 
a + b: number
@paramb 
b;
}

let let total: numbertotal = 
function $derived<number>(expression: number): number
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(await function sum(a: Promise<number>, b: number): Promise<number>
@parama 
@paramb 
sum(let a: Promise<number>a, let b: numberb));

await_waterfall

An async derived, `%name%` (%location%) was not read immediately after it resolved. This often indicates an unnecessary waterfall, which can slow down your app

在这种情况下...

let let a: numbera = 
function $derived<number>(expression: number): number
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(await function one(): Promise<number>one());
let let b: numberb = 
function $derived<number>(expression: number): number
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(await function two(): Promise<number>two());

...第二个$derived将在第一个解决后创建。由于await two()不依赖于a的值，这种延迟，通常描述为“瀑布”，是不必要的。

（请注意，如果 await one() 和 await two() 的值随后更改，它们可以同时更改——瀑布效应仅在派生值首次创建时发生。）

您可以通过先创建承诺并在 之后 等待它们来解决此问题：

let let aPromise: Promise<number>aPromise = 
function $derived<Promise<number>>(expression: Promise<number>): Promise<number>
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(function one(): Promise<number>one());
let let bPromise: Promise<number>bPromise = 
function $derived<Promise<number>>(expression: Promise<number>): Promise<number>
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(function two(): Promise<number>two());

let let a: numbera = 
function $derived<number>(expression: number): number
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(await let aPromise: Promise<number>aPromise);
let let b: numberb = 
function $derived<number>(expression: number): number
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(await let bPromise: Promise<number>bPromise);

绑定属性非响应式

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

控制台日志状态

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

当记录一个 代理 时，浏览器开发者工具将记录代理本身而不是它所代表的值。在 Svelte 的情况下，$state 代理的 ‘target’ 可能与其当前值不相似，这可能会造成困惑。

最简单的方法记录值随时间变化的情况是使用 $inspect 符文。或者，为了一次性记录某些内容（例如，在事件处理器内部），可以使用 $state.snapshot 来获取当前值的快照。

事件处理程序无效

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

水合属性已更改

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

某些属性，如src在<img>元素上，在激活过程中不会被修复，即服务器值将被保留。这是因为更新这些属性可能会导致图像被重新获取（或者在<iframe>的情况下，框架被重新加载），即使它们解析为相同的资源。

要修复这个问题，可以通过添加一个 svelte-ignore 注释来静音警告，或者确保服务器和客户端之间的值保持一致。如果你真的需要在恢复时更改值，可以强制更新如下：

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

	if (typeof window !== 'undefined') {
		// stash the value...
		const initial = src;

		// unset it...
		src = undefined;

		$effect(() => {
			// ...and reset after we've mounted
			src = initial;
		});
	}
</script>

<img {src} />

水合_html_已更改

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

如果服务器和客户端之间的 {@html ...} 值发生变化，则在活化过程中不会进行修复，即保留服务器值。这是因为活化过程中的变更检测成本高昂且通常不必要。

要修复这个问题，可以通过添加一个 svelte-ignore 注释来静音警告，或者确保服务器和客户端之间的值保持一致。如果你真的需要在恢复时更改值，可以强制更新如下：

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

	if (typeof window !== 'undefined') {
		// stash the value...
		const initial = markup;

		// unset it...
		markup = undefined;

		$effect(() => {
			// ...and reset after we've mounted
			markup = initial;
		});
	}
</script>

{@html markup}

水分不匹配

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%

此警告在 Svelte 遇到从服务器加湿 HTML 时发生错误时抛出。在加湿过程中，Svelte 遍历 DOM，期望一定的结构。如果该结构不同（例如，由于 HTML 因无效 HTML 而被 DOM 修复），则 Svelte 将遇到问题，导致出现此警告。

在开发过程中，此错误通常由一个console.error先导，详细说明了需要修复的有问题的 HTML。

无效的原始代码片段渲染

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

遗产递归响应块

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`.

生命周期_double_unmount

Tried to unmount a component that was not mounted

无效的所有权绑定

%parent% passed property `%prop%` to %child% with `bind:`, but its parent component %owner% did not declare `%prop%` as a binding. Consider creating a binding between %owner% and %parent% (e.g. `bind:%prop%={...}` instead of `%prop%={...}`)

考虑三个组件 GrandParent、Parent 和 Child。如果您执行 <GrandParent bind:value>，在 GrandParent 内部通过 <Parent {value} />（注意缺少 bind:）传递变量，然后在内 <Child bind:value> 的 Parent 内部执行，则会抛出此警告。

要修复它，将 bind: 绑定到值，而不是仅仅传递一个属性（即在这个例子中执行 <Parent bind:value />）。

无效所有权突变

Mutating unbound props (`%name%`, at %location%) is strongly discouraged. Consider using `bind:%prop%={...}` in %parent% (or using a callback) instead

考虑以下代码：

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}>

子对象正在修改由应用程序拥有的人对象，而没有明确“允许”这样做。这强烈不建议，因为这可能会创建难以在大规模上推理的代码（“谁修改了这个值？”），因此会发出警告。

要修复它，要么创建回调属性来传递更改，要么将person标记为$bindable。

选择多个无效值

The `value` property of a `<select multiple>` element should be an array, but it received a non-array value. The selection will be kept as is.

当使用<select multiple value={...}>时，Svelte 会通过遍历传递给value的数组，将所有选中的<option>元素标记为选中。如果value不是一个数组，Svelte 将发出此警告并保持选中的选项不变。

为消除警告，请确保 值：

  • 是一个用于显式选择的数组
  • 是 null 或 undefined 以保持选择不变

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(...) 创建传递给它的值的 代理。代理和值具有不同的身份，这意味着相等性检查总是会返回 false：

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

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

要解决这个问题，请确保您正在比较的是两个都通过$state(...)创建的值，或者两个都不是。请注意，$state.raw(...)将不会创建状态代理。

svelte_boundary_reset_noop

A `<svelte:boundary>` `reset` function only resets the boundary the first time it is called

当渲染一个 <svelte:boundary> 的内容时发生错误，将调用 onerror 处理器，并将错误以及一个尝试重新渲染内容的 reset 函数一起传递。

这个 重置 函数应该只调用一次。之后，它就没有效果了——在这种情况下，如果将 重置 的引用存储在边界之外，当 <Contents /> 被渲染时点击按钮，将 不会 再次渲染内容。

<script>
	let reset;
</script>

<button onclick={reset}>reset</button>

<svelte:boundary onerror={(e, r) => (reset = r)}>
	<!-- contents -->

	{#snippet failed(e)}
		<p>oops! {e.message}</p>
	{/snippet}
</svelte:boundary>

过渡幻灯片显示

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

幻灯片切换通过动画元素的高度height来实现，这需要一个display样式，如block、flex或grid。它不适用于：

  • display: inline（这是如<span>之类的元素的默认值），以及其变体如inline-block、inline-flex和inline-grid
  • display: 表格 和 表格-[name]，这是类似于 <table> 和 <tr> 元素的默认值
  • 显示: 内容

共享警告

动态空元素内容

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

元素如<input>不能包含内容，传递给这些元素的任何子元素都将被忽略。

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 尝试克隆给定的值以返回一个不再改变的引用。某些对象可能不可克隆，在这种情况下将返回原始值。在以下示例中，属性被克隆，但窗口没有被克隆，因为 DOM 元素不可克隆：

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: 'this is cloneable', 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: {
       ...;
   };
 };
 ... 211 more ...;
 readonly sessionStorage: {
   ...;
 };
        };
        ... 945 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);

Edit this page on GitHub llms.txt

previous next
Runtime errors