2019-01-22に更新

Nuxtでdocument is not definedエラー

SSR

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開発者

Crieitの開発者です。 主にLAMPで開発しているWebエンジニアです(在宅)。大体10年程。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel5, CakePHP3, JavaScript, RoR 趣味:Elixir, Phoenix, Node, Nuxt, Express, Vue等色々

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント