Help us understand the problem. What is going on with this article?

【Nuxt.js】Universalモードで「window is not defined」エラーが出たときの対処法

Nuxt.jsに外部プラグインを追加したときに下記のようなエラーがでました。

ReferenceError: window is not defined <hogehoge>

Universal(SSR)モードのエラー

Universal(SSR)モードのときはJavascriptの命令文「document」や「window」はエラーになってしますようです。

インストールしたプラグインがサーバーサイドで動いているようでした。

Nuxtがサーバー側でレタリングする際に、クライアント(ブラウザ)は存在しませんので「document」や「window」はサーバー側ではエラーをおこすようです。

フーム、じゃあクライアント側で設定されていないプラグインは使えないじゃかと思ったのですが、きちんと対処法がありました。

フロントで動くように記述

<client-only>を記述することによりこのエラーを回避することができました。
API: コンポーネント

<client-only>
  <hogehoge>Foo Bar</hogehoge>
</<client-only>

※Nuxt のバージョンがv2.9.0未満の場合、<client-only>のかわりに<no-ssr>を使用してください。

hiroyukiwk
Nuxt.js/Vue.jsを専門にしているWeb Desiner/Frontend Developperです。 Web制作やSPA,JAMStackなどの開発を主に行っております。
acall
ACALLは、「Life in Work and Work in Life for Happiness」をVISIONとして、どこでも安心・安全・快適なワークスタイルを実現するスマートオフィスプラットフォーム「WorkstyleOS」を開発・提供しています。オフィスワークとリモートワークのベストミックスを通じて、人々の「くらし」と「はたらく」を自由にデザインできる世界を目指します。
https://www.workstyleos.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away