vue、vuex、nuxt、firebaseなどのエラーまとめです。
凡ミスも一応初心者向けに残しています。メモ魔のため一部個人的な覚書もかねています。command + Fで検索してください。
目次
- 1 vue.jsのエラー(error)
- 1.1 [Vue warn]: Property or method “” is not defined on the instance but referenced during render.
- 1.2 Avoid using non-primitive value as key, use string/number value instead
- 1.3 [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: “”
- 1.4 [Vue warn]: Unknown custom element: – did you register the component correctly? For recursive components, make sure to provide the “name” option.
- 1.5 TypeError: handler.call is not a function
- 1.6 [Vue warn]: Invalid prop: type check failed for prop “”. Expected Function, got Number with value
- 1.7 unexpected side effect in computed property
- 2 vuexのエラー(error)
- 3 javascriptのエラー(error)
- 4 firebaseのエラー(error)
- 5 nuxt/vuex/vue/firebase/typescriptのudemy教材/電子書籍まとめ
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を使ってしまったとか。
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になおすとなおることが多い気が…。凡ミスとしては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)
maximum call stack size exceeded nuxt
Maximum call stack size exceeded
スタックのサイズがオーバーした状態。
returnでミスったり、関数内でうっかり名前がかぶって再帰処理をしていたり。
computed: {
name() {
const str = this.name
}
}
常時監視や無限ループっぽい処理を疑ってみるといいかもです。
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の動画教材や書籍教材は経験則を元に、こちらの記事でまとめてあります。
ご参考になれば幸いです。
コメント