Nuxt.jsにて、npmで提供されているVueコンポーネントを利用しようとした時に、ReferenceError: document is not defined
というエラーが出ることがあるのでそれの解決方法。
例えば僕の愛用しているJohMun/vue-tags-input
でも出るのだが、その場合下記のようにテンプレートを書く。
<no-ssr>
<vue-tags-input
v-model="tag"
:tags="tags"
@tags-changed="newTags => tags = newTags"
/>
</no-ssr>
プラグイン追加で出る場合は、nuxt.config.jsの該当プラグインでssr: false
にすれば解決する場合もある(プラグインの説明に書いてあったりする)
エラーと対応内容を見ればだいたい分かると思うが、そもそもSSR(サーバーサイドレンダリング)を考慮していないVueコンポーネントも存在し、そういったライブラリは今回のようにブラウザ上だけで存在している、document
を参照している場合がある。
サーバーサイドレンダリングの場合はブラウザではないため当然document
は存在しないためundefined
となりエラーになる。そのため、<no-ssr>
タグで囲ってあげることで、ブラウザ上では表示するが、サーバーサイドレンダリングのタイミングでは動作させないようにすることでエラーを防ぐことができる、という仕組み。
そのため、当然Nuxt.jsに限らずサーバーサイドレンダリングしている場合は発生する場合がある。
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント