はりうすブログ (のすけのメモ)

湘南にある小さな会社 代表 ”のすけ”のブログです

Nuxt.js のエラー 「Failed to execute 'appendChild' on 'Node': This node type does not support this method」

nuxt-linkで遷移した場合には問題ないのですが


リロードやURLを直接叩いた場合に以下のようなエラーが発生します

DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Object.appendChild

原因としては、クライアントサイドとサーバーサイドのDOMに差異が発生しているためのようです。



特にv-ifを利用するとほぼ発生するように思います


その場合、v-ifの前後や、場合によってはコード全てを

<client-only></client-only>

で囲えば発生しなくなります



ご察しの通り、これで囲った部分は、クライアントサイドレンダリングになりますので

その辺りはご注意ください


参考:

【Vuetify】NuxtのSSRでVuetifyのDatePickerを使用したら「The client-side rendered virtual DOM tree is not matching server-rendered content. 」というエラー発生 - Qiita