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時のエラーであると考えたほうが早いかも
と考えていけばよい気がする。
はい、たいしたことない話、おわり。