More than 3 years have passed since last update.

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

Last updated at 2020-03-10Posted at 2020-03-10

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>を使用してください。