Svelteリファレンス

ランタイム警告

クライアント警告

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` の結果の値は空の状態プロキシです。そのため、プッシュされた値は破棄されます。

これを修正するには、2つのステートメントに分割します。

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[]): numberAppends 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: numberGets 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

プロキシをログに記録すると、ブラウザの開発ツールは、それが表す値ではなく、プロキシ自体をログに記録します。Svelte の場合、`$state` プロキシの「ターゲット」は、現在の値とは似ていない可能性があり、混乱を招く可能性があります。

値が時間の経過とともに変化する様子をログに記録する最も簡単な方法は、`$inspect` ルーンを使用することです。あるいは、一度限りのログを記録する場合（たとえば、イベントハンドラー内）は、`$state.snapshot` を使用して、現在の値のスナップショットを取得できます。

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

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

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%

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%

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

reactive_declaration_non_reactive_property

A `$:` statement (%location%) read reactive state that was not visible to the compiler. Updates to this state will not cause the statement to re-run. The behaviour of this code will change if you migrate it to runes mode

レガシーモードでは、`$: ` リアクティブステートメントは、それが_参照_している状態が変化したときに再実行されます。これは、コードを分析することによって、コンパイル時に決定されます。

ルーンモードでは、エフェクトと派生物は、関数の_実行_中に読み取られた値が変化したときに再実行されます。

多くの場合、結果は同じです。たとえば、これらは同等と見なすことができます。

$: let sum: numbersum = let a: numbera + let b: numberb;

const const sum: numbersum = function $derived<number>(expression: number): number
namespace $derivedDeclares 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.dokyumento.jp/docs/svelte/$derived
@paramexpression The derived state expression$derived(let a: numbera + let b: numberb);

上記のような警告を引き起こしたケースのように、同じ_ではない_場合もあります。

const const add: () => numberadd = () => let a: numbera + let b: numberb;

// the compiler can't 'see' that `sum` depends on `a` and `b`, but
// they _would_ be read while executing the `$derived` version
$: let sum: numbersum = const add: () => numberadd();

同様に、深い状態のリアクティブプロパティは、コンパイラには見えません。そのため、これらのプロパティへの変更はエフェクトや派生物を再実行させますが、`$: `ステートメントを再実行させることは_ありません_。

このコンポーネントをルーンモードに移行すると、それに応じて動作が変化します。

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(...)` は状態プロキシを作成_しない_ことに注意してください。

共有警告

dynamic_void_element_content

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

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%

GitHub でこのページを編集

前へ次へ

ランタイムエラー概要