Vitestで「Slot "default" invoked outside of the render function」というエラーが発生した件について
2024-03-15
事象
画面触ってるときは出てこないのに、Vitestを走らせたときだけ以下のエラーが表示される事象に遭遇した。
Slot "default" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render function instead.
考えられる原因とその対処
親コンポーネントとは別のタイミング(v-if
)で描画される子コンポーネント内で、setup
でawait
を使うのがよくないっぽい…?
(v-show
でも変わらなかった気もするが)
今回の原因
v-if
によりユーザー操作で表示される子コンポーネントのマウント時に、非同期処理が走っていたこと。
ここでいう非同期処理は、Storeからのデータ取得処理。
対処
Storeからデータ取得する処理は、初めから表示される親コンポーネントで行い、
Provide/Injectを使って子コンポーネントで値を受け取る形に実装を修正。
スポンサーリンク