【Nuxt.js】ReferenceError: window is not defined ってエラーが出た

Nuxt.js だと SSR の影響で window とか document を使うとエラーが出るらしい。

// "ReferenceError: window is not defined" って言われる
window.addEventListener(scroll, myFunc);

回避方法が公式ドキュメントにあったのでメモ。

.vue ファイル内での処理

if (process.browser) {
  // ここに window とか document を使った処理
}

外部ライブラリを使う場合

- .vue ファイル

if (process.browser) {
  require('外部ライブラリのパス');
}

- nuxt.config.js ファイル内にも該当ライブラリを追加しておく

build: {
  vendor: ['外部ライブラリのパス']
 }

参考:
window または document が undefined のときは?
https://ja.nuxtjs.org/faq/window-document-undefined/

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

3

たか橋

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。