Nuxt.jsでReferenceError: window is not defined ってエラーが出たときの対処法

外部ライブラリを使うと時折, window is not definedといったエラーに出くわします。

そんなときは、process.client を使うことで回避できます。

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

とNuxt.jsの公式サイトにも書いてあります

私の場合は、particles.jsをnpmで読み込んで使ったときに起きたのですが、下記のように書いて回避できました。

mounted() {
    require('particles.js')//JSの読み込み
    particlesJS('particles-js', //実行
        {以下設定値省略})
}

宣伝

最近Webデザイナ向けのお役立ちサイトを作りました。よかったらこのサイトも御覧ください

この記事を書いた人

conti

名古屋在住のUIデザイナ。UIコンポーネントの設計と運用と素早くプロトタイプを作りながらフロントの実装するのが得意です。最近はReactを触るのとデザインシステムを作るのが好きです。コーギーと暮らしています。
プロフィール