svelte

これは Svelte 5.57.2 におけるリアクティビティのバグです。イベントハンドラーからインスタンス化されたクラスやモジュールレベルのストアなど、エフェクトの外側で作成された $derived では、親エフェクトが null であるため、プロキシの has トラップが存在しないキーを追跡しませんでした。get トラップは常にソースを作成するため、プロパティへの直接アクセスは正常に機能していました。

これは PR #18944 で修正され、存在しないキーの追跡条件が active_effect !== null から active_reaction !== null に変更されました。その修正を含む新しいリリース、理想的には最新の Svelte 5.x バージョンに Svelte 5 をアップグレードしてください。

一時的な回避策として、in や Object.hasOwn を使用する前に、同じ derived 内でそのプロパティを直接読み取るように強制してください:

has_x = $derived((this.state.x, 'x' in this.state));
owns_y = $derived((this.state.y, Object.hasOwn(this.state, 'y')));

直接読み取りによってリアクティブなプロパティソースが作成されるため、後で x や y を追加すると derived が無効化されます。

let: ディレクティブは、子コンテンツが {#snippet children()} で定義されている場合には機能しません。let:value 宣言は無視されるため、value は undefined になります。let:value を削除し、代わりにスニペットのパラメータを通じて値を受け取ってください:

<Child>
  {#snippet children({ value })}
    Value is: {value}
  {/snippet}
</Child>

この動作は、バージョン 5.1.0 を含む Svelte 5 で発生します。

これは、Svelteが追跡されない読み取り（untracked read）中に子孫のderived値を接続してしまうことが原因で発生します。derivedはreactions === nullのままCONNECTED状態を維持し、page.dataのような長寿命のソースに登録されたままとなり、アンマウントされたコンポーネントのコンテキストやDOMを保持し続ける可能性があります。この問題はSvelte 5.57.0において、effect内でのuntrack(() => get(snapshot))のようなパターンや、onMount内でのあらゆるderivedの読み取りで再現できます。

derived接続の修正を含む5.xリリースにSvelteをアップグレードすることで修正できます：

npm install svelte@latest
# または
pnpm update svelte
# または
yarn upgrade svelte --latest

インストールされたバージョンはnpm ls svelteで確認してください。アップグレード後は、effectルートが破棄された後、再現コードの最終的なsource.reactionsはreactionを保持するのではなくundefinedになるはずです。

一時的な回避策として、複雑な$derivedチェーンをuntrack()やonMountの内部でのみ読み取ることは避けてください。それらの場所では生の状態（state）を読み取るか、derivedが通常の追跡されるリアクティブコンテキストから読み取られるようにコードを再構成してください。根本的な修正は、アクティブな読み取り側それ自体が接続されている場合にのみderivedを接続するSvelteのパッチです。

これは既知の Svelte 5 のバグです（5.25.9 で報告されています）。フォーカスされている要素が {#if} ブロックによって削除されると、Svelte がテンプレートエフェクトを実行している最中にブラウザが focusout を発火し、activeElement バインディングがそのエフェクトの実行中に状態を更新しようとしてしまいます。

「don't throw state_unsafe_mutation when the focused element is removed with bind:activeElement」という修正を含む、より新しい 5.x リリースへ Svelte をアップグレードすることで修正できます：

npm install svelte@latest

その後、開発サーバー／ビルドを再起動してください。

アップグレードできない場合の一時的な回避策：要素を削除する前に blur を実行します：

<button
  onclick={(event) => {
    event.currentTarget.blur();
    showButton = false;
  }}
>
  hello
</button>

あるいは、requestAnimationFrame(() => (showButton = false)) を使って削除を遅延させる方法もあります。

これは experimental.async: true を有効にした場合の Svelte 5.57.1 コンパイラのバグです。本番ビルドでは、トップレベルの await 以降のコードがハンドラーを代入する前に、そのハンドラーが $.delegated() または $.event() に渡されるため、リスナーが undefined になります。開発ビルドではハンドラーが遅延的に読み込まれるため、正常に動作します。

修正は PR #18933 で実装されています。リリースされたら Svelte をアップグレードしてください。それまでは、以下のいずれかの回避策を使用してください。

1. 最初の await の前にハンドラーを作成します:

<script>
	const make = (name) => () => console.log(name);
	const onclick = make('click');

	await Promise.resolve();
</script>

<button {onclick}>click</button>

2. ハンドラーをインラインのアロー関数でラップし、イベント発火時に読み込まれるようにします:

<button onclick={() => onclick()}>click</button>

本番環境の結果は以下で確認します:

vite build && vite preview