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時のエラーであると考えたほうが早いかも

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

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

Vuex にて state に（ data で定義した）Object を代入すると参照渡しとなり、当該 data の変数を v-model で参照している場合、値を変更するとエラーとなる

こんなエラーが出た。

app.js:580 Error: [vuex] do not mutate vuex store state outside mutation handlers.
    at assert (commons.app.js:19688)
    at Vue.store._vm.$watch.deep (commons.app.js:20364)
    at Watcher.run (commons.app.js:15703)
    at Watcher.update (commons.app.js:15677)
    at Dep.notify (commons.app.js:11878)
    at Object.reactiveSetter [as keyword] (commons.app.js:12203)
    at Proxy.set (commons.app.js:12225)
    at input (index.js:692)
    at invokeWithErrorHandling (commons.app.js:13000)
    at HTMLInputElement.invoker (commons.app.js:13325)

このエラーの原因はなんの変哲もなく、mutations を通さずに Vuex の state を直接更新しようとしたから。

しかし、直接の原因は data に定義した Object を state に代入していたためだった。

mutations を通して代入していたとしても、（ data で定義した）Object を代入すると参照渡しとなり、当該 data の変数を v-model で参照しているため値を変更した瞬間上記のエラーとなってしまう。

ざっくりとソースコードに落としてみる。

Page Component

<template>
  <input v-model="searchCondition.keyword" type="text">
  <button type="button" click="executeSearch">検索</button>
</template>

<script>
export default {
  data() {
    return {
      searchCondition: {
        keyword: ''
      }
    }
  },
  methods: {
    async executeSearch() {
      await this.$store.dispatch('SEARCH', this.searchCondition)
    }
  }
}
</script>

State / mutations / actions

export const state = () => ({
  searchCondition: {
    keyword: ''
  }
})

export const mutations = {
  SET_SEARCH_CONDITION(state, payload) {
    state.searchCondition = payload
  }
}

export const actions = {
  async SEARCH({ commit }, payload) {
    const { data } = await this.$axios.get('/search', { params: { ...payload } }).catch(err => { 
      return err.response
    })
    commit('SET_SEARCH_CONDITION', payload) // Objectの参照渡しとなってしまう
  }
}

対策としては、DeepCopy してあげればよいが、まあとりあえず Shallow Copy でお茶を濁しておく。

commit('SET_SEARCH_CONDITION', { ...payload })

もしかしたら参照渡しとか表現などなど間違っているかもしれないので、ツッコミくだしあ。

DESTINY 鎌倉ものがたり

評判通りなかなかおもしろかったー！

本筋みたいなのが無い？いやある？って感じだったけど、最後にいい感じに伏線となって回収されたような清々しさ。

最後の方はなぜか急にバトルモノ映画になってよくわからん感じだったけど、それも前半の巻物とリンクして良い。

中でも８００年みんなから嫌われてきた貧乏神のくだりがマジで良かった。

あと、安藤サクラの死神がよかったなあｗ

ベイビーブラザー

主演のトーマス・ブロディ＝サングスター、どっかで観たなと思ったらメイズ・ランナーに出てた俳優さんだ。

父親違いの兄弟が、末っ子（推定４ヶ月くらいかな）を父親にあわせるべく旅をするという兄弟愛を題材にした映画。

ヨーロッパの映画らしく、前編通して陰鬱な雰囲気が最高に良い。

英語だと思うけど（英国語？）、セリフも詩的。

アメイジング・スパイダーマン2

やっぱりアベンジャーズに合流したスパイダーマンシリーズとして、トム・ホランドのスパイダーマンには思い入れがあるし、サム・ライミ監督が好きなのでトビー・マグワイアのスパイダーマンも好きなんだよね。

なので、そこまであまり期待はしていなかったのだけど、思えばアンドリュー・ガーフィールドは BOY A からファンだし、エマ・ストーン（グウェン・ステイシー）はスパイダーマン映画の中で一番綺麗なヒロインだと思うから、めっっっっっっっっっっちゃ楽しかった！

ちょっと期待したのだけど、スパイダー・グウェンは出なかったんだね。

そして続編が期待されるような終わり方だったのだけど、大人の事情で制作されないのがやっぱり寂しいね。

オクトパスとかヴァルチャーとかの装備だけは出てきていたし（まあ、サム・ライミ版やジョン・ワッツ版には出てたけど）。

それから、そんなグウェンのスピーチがまじで泣けた。響いた。

こんな明るい日は
希望を感じます

しかし 暗い日も
あるでしょう

とても寂しい日も

そんな日こそ
希望が必要です

どんなに辛くても
どんなに悲しくてもー
絶対に希望を捨てないと
約束してください

明るくー
苦しみを乗り越え

あなた方自身が
希望になってほしい

それが大切です

たとえ及ばすとも
それが最高の人生です

周りには 私たちを
育ててくれた人たちがいます

今日でお別れですがー

ここで学んだことは
すべて明日に生かされます

自分が何者なのか
何をすべきか・・・

共に４年間を過ごした
皆を忘れません

ミッション：インポッシブル フォールアウト

わー、面白かった！

今までのミッション：インポッシブルで一番おもしろい！

「1人の命を救うか、大勢の命を救うか」という難しい題材に始まり、盗まれたプルトニウムを追っていたら更に大物が〜という流れから、裏切りの連続。

ずっと手に汗握って観れる映画だった！

レプリカズ

やっと嫁ちゃんと映画デート出来たｗ

子供が生まれて以来だから、５年ぶりくらいかな。

奥さんと子供を失ってしまった脳神経科学者が、その奥さんと子供をクローン人間として蘇らせる話。

なんといってもキアヌ・リーブスが主演というのが個人的に観る理由なのだけど、「主演が誰々だからこの映画を観たい」と思えるのはキアヌだけだ。

いろいろ突っ込みどころはあるのだけど、奥さんと娘を失った衝撃というのがもう観ていて辛かったし、そういう話を嫁ちゃんともした。

内容は概ね面白かったけど、もはやこういった「人の心を別の物体に移す」というネタ自体は使い古されているのかな。

なので、家族愛とかいろいろ映画のために入れている感はあった。

でも、キアヌ、奥さんと子供を亡くしているなんだよなあ・・・。

そのバックグラウンドもあって、ちょいちょい泣けた。