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]: Computed property “” was assigned to but it has no setter.
- 1.4 [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.5 [Vue warn]: Unknown custom element: – did you register the component correctly? For recursive components, make sure to provide the “name” option.
- 1.6 error Unexpected side effect in “” computed property
- 2 vuexのエラー(error)
- 3 Nuxtのエラー(error)
- 4 javascriptのエラー(error)
- 5 firebaseのエラー(error)
- 6 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
}
},
コメントアウトしたときにうっかりと必要なものまでコメントアウトしてしまったとかやりがちです。もしくは片方大文字になっているとかですかね。
computedの指定でもOKです。下記はproductsを指定を指定する例。firebaseと連携しているとこうなりやすいです。
computed: {
products() {
return this.$store.getters['a/products']
}
},
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]: Computed property “” was assigned to but it has no setter.
[Vue warn]: Computed property "" was assigned to but it has no setter.
setterが必要なのにない。
[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のプラグインに登録して利用することが多いでしょうが、新しいグラフなどを呼び出す場合、追加が登録が必要です。凡ミスですね。
error Unexpected side effect in “” computed property
error Unexpected side effect in "" computed property
VueXを使っているときに、時々見かけるエラー。おそらくreturnで返しているものが期待できないです。
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になおすとなおることが多い気が…。
Nuxtのエラー(error)
Nuxt Fatal Error Error: getaddrinfo ENOTFOUND
Nuxt Fatal Error Error: getaddrinfo ENOTFOUND
ぐぐったら、localhostを追加しよう→追加してあるしな。
firebaseの料金プランを変えよう→本当？？今まで動いていたのですけど。
このエラーは何回か起きたことがあります…^^;。
Macの再起動でなおりましたが、通信環境を切り替えてVS Codeの再起動だけでいい気がします。wifiなど回線を切り替えたとき、でやすい気がします(詳しくは調べていません、なんとなく直感です。)
別のケースで半月ぶりにプロジェクトを動かしたらローカルホストの名前が変わっていたのです。。そもそもなんで変わったのという疑問があるのですが、、明快な答えまでたどり着けず…。
http://macbook.localhost:3000/
↓
http://macbook.lan:3000/
いったん、応急処置でこの場合はfirebaseにローカルホストを追加してあげました。
javascriptのエラー(error)
‘a’ is constant
基本です。constの再代入はできません。配列から値を取る方法や、定数ではなく変数ならletがあります。letは代入できます。
Maximum call stack size exceeded
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の動画教材や書籍教材は経験則を元に、こちらの記事でまとめてあります。
ご参考になれば幸いです。
コメント