スイッチングコンポーネントによるSvelte/Sapper問題

私は、最初のsvelteバグが何であるかについて、働いていました.非常に大まかに、私はこのように見えるページセットアップを持っています<script> and <style> セクションを省略し、省略されていないコンポーネントのプロパティ)

<main>
  {#if $state === 'game'}
    <GameStageLocal />
  {:else if $state === 'deal'}
    <DealAnimation onDone={dealingDone} />
  {:else}
    <div>Initializing...</div>
  {/if}
</main>

The <DealAnimation> コンポーネントはいくつかのゲームスタートアニメーションを再生し、それが完了したらonDone ハンドラが渡されます.それは更新することですstate (書物店)game だからインタラクティブなゲームのUIが開始されます.
上記のコードから推論できます.$state 自動購読ストアですので、その値が変更されると、そのようなページのDOMを変更します<GameStageLocal> 現在、何がページにありますか<DealAnimation> DOMから削除されます.
Firefoxのコンソールをテストするとき、以下のエラーが発生しました.

TypeError: t.parentNode is null

私のsvelteコードのエラーを見つけることができず、svelte - devのビルド出力にエラーがなかったので、少し困惑しました.オンラインで検索するとthis StackOverflow post どちらが私の問題ですか.答えは以下の通りです.

Ran into this error recently. In my case it was due to another library changing the DOM. (In my case fontawesome)

私はDOMを変更するために別のライブラリを使用していなかった唯一のsvelte.いずれにせよ、答えの説明されたfixは私のために働きました.そして、それは私のコンポーネントをもう一つのノードのそれらの条件の中に包むことでした.

<main>
  {#if $state === 'game'}
    <div>
      <GameStageLocal />
    </div>
  {:else if $state === 'deal'}
    <div>
      <DealAnimation onDone={dealingDone} />
    </div>
  {:else}
    <div>Initializing...</div>
  {/if}
</main>

そして、これはうまくいきました.

考えを捨てる
私は、これはSvelteの一般的な相対的な未熟さを示すために反応するか、Vueと比較するために行くと思います.私はSvelteのファンのままですが、それでも小さなフレームワークを使用するときは、フレームワークの実際のバグにバインドされていることを心に留めておくのが良いです.