2018-10-31に更新

Nuxtでdocument is not definedエラー

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>

なぜ発生するのか?

エラーと対応内容を見ればだいたい分かると思うが、そもそもSSR(サーバーサイドレンダリング)を考慮していないVueコンポーネントも存在し、そういったライブラリは今回のようにブラウザ上だけで存在している、documentを参照している場合がある。

サーバーサイドレンダリングの場合はブラウザではないため当然documentは存在しないためundefinedとなりエラーになる。そのため、``タグで囲ってあげることで、ブラウザ上では表示するが、サーバーサイドレンダリングのタイミングでは動作させないようにすることでエラーを防ぐことができる、という仕組み。

そのため、当然Nuxt.jsに限らずサーバーサイドレンダリングしている場合は発生する場合がある。


だら@Crieit開発者

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

Crieitはαバージョンで開発中です。進捗は公式Twitterアカウントをフォローして確認してください。 興味がある方は是非記事の投稿もお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか
関連記事

コメント