Nuxt.js どうにも不明なエラーが出た場合チェックする箇所

Nuxt.js を書いていてこんな経験は無いだろうか？

• 急にエラーが出た
• ソースコード上では全く問題なさそう
• エラー箇所を消してもエラーの内容に変化なし

無い？ああ、あなたはすぐこのページを閉じるべきです。

なぜならたいしたことのない話だからです。

ある時を境にして vee-validate で has undefined になった

フォームのバリデーションを行ってくれる VeeValidate というものがある。

Nuxt.js での使い方としては、

yarn add vee-validate

してあげて、

pligins/vee-validate.js というファイルを作成。

中身を下記のように作成する。

import Vue from 'vue'
import VeeValidate, { Validator } from 'vee-validate'
import ja from 'vee-validate/dist/locale/ja'

Validator.localize('ja', ja)
Vue.use(VeeValidate, { locale: 'ja' })

最後に nuxt.cofig.js を下記のように書いてあげれば使えるのだが（詳しい使い方などは オフィシャルサイト を参照）

  plugins: [
    { src: '@/plugins/vee-validate', ssr: true }
  ],

ここまでは特に問題無い。

しかし、

TypeError
Cannot read property 'has' of undefined

というエラーがある時を境にして発生し、ついにフォーム画面が開けなくなってしまった。

原因調査

いろいろ見たが、ソースは問題ないし、小一時間ほどハマってしまった。

そして、ふとブラウザ上だけではなく、コンソールの方でもエラーメッセージが出ていることに気づいた。

 ERROR  [Vue warn]: Error in render: "TypeError: Cannot read property 'has' of undefined"

原因

どこかで「バリデートって別にSSR時は不要じゃないかな」と思い、下記のように編集してしまっていた。

ssr: false にするとSSR時は適用されなくなるのだが、tmplateはレンダリングしようとするため、 vee-validate の has が undefined になってしまったのが原因。

  plugins: [
    { src: '@/plugins/vee-validate', ssr: false }
  ],

ssr: false を ssr: true に戻してあげてやっと解決した。

こういうときは

• 直近で思い当たるフシはないか？
• コンソールに何か表示されていないか？
  • コンソールにエラーメッセージが表示されている場合は、おおよそSSR時のエラーであると考えたほうが早いかも

と考えていけばよい気がする。

はい、たいしたことない話、おわり。