Nuxt.jsでDom系のエラーの対応方法(ReferenceError: document is not defined)

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、Nuxt.jsでDom系のエラー対応の方法(ReferenceError: document is not defined など)について解説していきます。

1 Nuxt.jsでDom系のエラーの対応方法 (ReferenceError: document is not defined)
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 プログラミング学習・エンジニア転職関連の情報
5 Twitterやってます！Follow Me！
6 参考・引用
7 最近の投稿

Nuxt.jsでDom系のエラーの対応方法 (ReferenceError: document is not defined)

なぜ document is not defined などの Dom系の ReferenceError エラーが発生するのか？

実務上で、Nuxt.jsを使用している際に、ReferenceError: document is not defined に遭遇しました。

なぜ document is not definedなどの Dom系の ReferenceError エラーが発生するのか？

それは Nuxt.js の SSR（サーバーサイドレンダリング）利用するComponentなどで、

DOM系などのWebブラウザ(FrontEnd・ClientSide)上のDataにアクセスしようとしているからです。

なので、今回のような document に限らず、SSRでレンダリングするComponentなどでは、

Serverで処理している段階のCode上では、Webブラウザ系の Object・プロパティへのアクセスができません。

解決方法1: no-ssrタグを利用する

解決方法はシンプルで、DOMを利用したい場合は、DOMを利用するComponentを次のように、<no-ssr>タグで囲むことです。

<template>
  <div>
    <!-- document is not defined などの SSR_Error を防止する: no-ssrタグ -->
    <no-ssr>
      <CartItems :cartItemList="cartItemList" />
    </no-ssr>
  </div>
</template>

<no-ssr>タグで囲ってあげることで、ブラウザ上では表示するが、

サーバーサイドレンダリングのタイミングでは動作させないようにすることでエラーを防ぐことができます。

解決方法2: process.client を利用する

process.clientを利用することで、クライアントサイドでのレンダリング時でのみ処理するようにさせることができます。

if (process.client) {
  return window.location.origin;
}

解決方法3: SSRに対応していない pluginを使っている場合は、ssr:falseを追加する

先述の解決方法1や、2で解決できない場合は、SSRに対応していない pluginを使っていることが原因の可能性があります。

nuxt.config.js のpluginsのプロパティDataをチェックします。

例えば、plugins内のutil.jsがlocalStorage を使用している場合は、次のようにssr: falseのkey: valueを追加します。

  plugins: [
    '~/plugins/vue-swal',
    '~/plugins/vue-cookie-accept-decline',
    '~/plugins/common',
    '~/plugins/route',
    '~/plugins/axios',
    '~/plugins/message',
    '~/plugins/clickOutside',
    '~/plugins/authUtil',
    // NOTE: util.js 内では、localStorage を使用しているので、SSR を falseに設定する。
    {
      src: '~/plugins/util',
      ssr: false,
    },
  ],