Svelte の Error: {#each} only iterates over array-like objects. について

Svelte にて array を each で扱う時に下記エラーが出た。

Error: {#each} only iterates over array-like objects.

each は配列っぽいものをただ繰り返すだけ。
と多分書いてある。

どういう時になるのか

結論からいうと配列を配列以外の型にした時。
例えば下記のようなコード。

let lists = []

function add(value) {
		let arr = lists
		arr.push(value)
		lists = arr
}

これを下記コードのように、
配列を null にすると起きる。

let lists = []

function add(value) {
		if (!lists) {
			lists = []
		}
		let arr = lists
		arr.push(value)
		lists = arr
		// 3は適当
		if (lists.length == 3) {
			// Uncaught (in promise) Error: {#each} only iterates over array-like objects.
			// Object 型に入れ替えても同じエラーが起きる
			lists = null
		}
}

対応

そもそも違う型を入れないのはそうなんだけど、
仮に null になった場合を想定。
if した時に false になる状態になっていないと少し面倒。

<!-- lists = null -->

<!-- Uncaught (in promise) Error: {#each} only iterates over array-like objects. -->
{ #each lists || [] as list }
	{ list }<br>
{ /each }


<!-- その1。誰かが実装していた。ハック？ -->
{ #each lists || [] as list }
	{ list }<br>
{ /each }


<!-- その2。 if 使う。 -->
{ #if lists }
	{ #each lists || [] as list }
		{ list }<br>
	{ /each }
{ /if }

エラーになった経緯

本来配列に入るべきオブジェクトの内容があって、
そのプロパティに対して一部足りない状態のオブジェクトを配列に代入していて起きた。
その足りなかったプロパティがたまたま Array 型だったという話。