nuxt/vuex/vue/firebaseのerror(エラー)と解決方法まとめ

vue、vuex、nuxt、firebaseなどのエラーまとめです。

凡ミスも一応初心者向けに残しています。メモ魔のため一部個人的な覚書もかねています。command + Fで検索してください。

vue.jsのエラー(error)

エラーも覚書程度に残しておきます。

[Vue warn]: Property or method “” is not defined on the instance but referenced during render.

vue.runtime.esm.js:619 [Vue warn]: Property or method "" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See:

これは簡単で初心者向きです。ただ定義を忘れているだけです。。

data () {
  return {
    flag: false
  }
},

コメントアウトしたときにうっかりと必要なものまでコメントアウトしてしまったとかやりがちです。もしくはhtmlとscriptの小文字大文字が一致していない場合もでます。

Vs Codeの検索をする場合、Aaのチェックを入れると大文字と小文字の判定ができます。エラーの原因を絞り込む際に使えます。

dataではなくcomputedの指定でもOKです。下記はproductsを指定を指定する例。firebaseと連携しているとこうなりやすいです。

computed: {
  products() {
    return this.$store.getters['a/products']
  }
},

[Vue warn]: Property or method "invalid" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the propert

たまに、自分で定義していないものがでてくることがあります。:disabled=”invalid”
この場合はVeeValidate3のボタンの無効化ですね。追加したライブラリを疑ってみましょう。

Avoid using non-primitive value as key, use string/number value instead

Avoid using non-primitive value as key, use string/number value instead

keyにはstring型かnumber型(intなど)かを指定するように。for文のindexに書き換えで解決。

v-for="(task, index) in taskList" :key="index"

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “”

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: ""

warnです。dataやcomputedを指定しましょう。propsから直接methodsを書き換えてはダメです。

export default {
  props: {
    propsValue: Number
  },
  data() {
    dataValue: this.propsValue
  },
  methods: {
    do() {
      this.dataValue = 7
    }
}

[Vue warn]: Unknown custom element: – did you register the component correctly? For recursive components, make sure to provide the “name” option.

[Vue warn]: Unknown custom element:  - did you register the component correctly? For recursive components, make sure to provide the "name" option

通常、XXXに入るhtmlに問題があることが多いです。ただのスペルミス(divをduvと書いてしまう)やHTMLをパスカルケース(htmlは大文字と小文字の区別をしない)にするなどのミスです。

次のようなケースもあります。

[Vue warn]: Unknown custom element:  - did you register the component correctly? For recursive components, make sure to provide the "name" option.

chart.jsのエラーです。

nuxtで利用する場合、chart.jsのプラグインに登録して利用することが多いでしょうが、新しいグラフなどを呼び出す場合、追加が登録が必要です。凡ミスですね。

TypeError: handler.call is not a function

大変くだらないエラーです。functionで書くべきものがかいていないです。

TypeError: handler.call is not a function

(例)

mounted: {},
created: {},

↓

mounted() {},
created() {},

[Vue warn]: Invalid prop: type check failed for prop “”. Expected Function, got Number with value

[Vue warn]: Invalid prop: type check failed for prop "". Expected Function, got Number with value

propの型が違います。上記の場合、FunctionからNumberに修正します。

unexpected side effect in computed property

error Unexpected side effect in "" computed property

おそらくreturnで返しているものが期待できないです。あとはconstで書くべきものをうっかりthisを使ってしまったとか。

Duplicate keys detected: ‘0’. This may cause an update error

Duplicate keys detected: '0'. This may cause an update error

keyの重複エラー。v-forを複数使ったときにでます。ユニークな値にすると解決。

<div v-for="(item, index) in items" :key="index"></div>
<div v-for="(other, index) in others" :key="index"></div>

うっかりとindexを入れてしまって重複。v-forが複数あるとでます。ただのミスが多いです。

<div v-for="(item, index) in items" :key="item.text"></div>
<div v-for="(other, index) in others" :key="other.text"></div>

もちろん、””a’+ index”と”‘b’+ index”みたいな形でもエラーは消えます。

vuexのエラー(error)

[vuex] unknown getter:

ブラウザのConsoalに出ていたエラーです。

namespacesの指定がされていなかっただけでした。。名前空間を引数に渡すように修正して解決。

[vuex] Do not mutate vuex store state outside mutation handlers

[vuex] Do not mutate vuex store state outside mutation handlers

vuex初心者がよく目にするエラー。vuexの構造的な欠陥が多い気がする。経験的にはコードが複雑になるactionsにJSON.parse(JSON.stringify(obj))ことが多い気が…。凡ミスとしてはmutationの書き忘れ。

はたまた、this.$store.dispatchの呼び出し場所や呼び出し方法が問題なっている場合もあります。たとえば、うっかりfor文の中に書いてしまったとか…。

はたまたディープコピーせずvuexの値を参照して落ちている場合もあります。対応方法はおなじみのこれですね。

JSON.parse(JSON.stringify(obj))

vuexのデータをなおす場合もありますが、取得時の場合は.vueファイルのgetのコードを修正しますね。

わりと広範囲のコードのチェックが必要かもしれません。

[vuex] unknown action type

[vuex] unknown action type

このエラーはいろいろな条件でですようですが、凡ミスも多いです。this.$store.dispatchに余計な記号が入っている、呼び出しと呼び出し先があっていないなど。

javascriptのエラー(error)

TypeError: Cannot read properties of undefined (reading ‘path’)

TypeError: Cannot read properties of undefined (reading 'path')

このエラーは謎です。。会員ページででたため、とりあえず、TwitterApiのログアウトとログインをしたらなおりましたが、一応開発めもとして残しておきます。nuxtを利用しています。

maximum call stack size exceeded nuxt

Maximum call stack size exceeded

スタックのサイズがオーバーした状態。

returnでミスったり、関数内でうっかり名前がかぶって再帰処理をしていたり。

computed: {
  name() {
    const str = this.name
  }
}

常時監視や無限ループっぽい処理を疑ってみるといいかもです。

Chromeのエラー

Unchecked runtime.lastError: The message port closed before a response was received

Unchecked runtime.lastError: The message port closed before a response was received

Chromeの拡張機能が悪さしているらしい。セキュリティ関係のものがあればその可能性が高そう。ローカル環境下の症状なので放置OK。なおシークレットモードにすれば表示されないよう。

Error handling response: TypeError: self.processResponse is not a function
    at chrome-extension://cmkdbmfndkfgebldhnkbfhlneefdaaip/js/notification.js:154:10

というエラーもあわせてでていたため調査。原因はWhatRunsという開発環境を調べる拡張でした。そこまで使っていないのでオフにして、ブラウザを再読込みすると解決しました。

読み込みエラー(error)

in ./node_modules/babel-loader/lib??ref–2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/

in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/

importなどの読み込みパスが間違っていますね。フォルダを掘ったりするとうっかりミスすることがあります。

firebaseのエラー(error)

firebaseのエラーは増えすぎたためページをわけました。

FirebaseError: Function CollectionReference.doc() requires its first argument to be of type non-empty string, but it was: a custom Object object

FirebaseError: Function CollectionReference.doc() requires its first argument to be of type non-empty string, but it was: a custom Object object

型が違います。型変換にはいろいろな方法がありますが、一例としてシンプルなもの。

const str = id.toString()

nuxt/vuex/vue/firebase/typescriptのudemy教材/電子書籍まとめ

nuxt/vuex/vue/firebase/typescriptの動画教材や書籍教材は経験則を元に、こちらの記事でまとめてあります。

http://ebookbrain.net/vue-js

ご参考になれば幸いです。