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
  }
},

コメントアウトしたときにうっかりと必要なものまでコメントアウトしてしまったとかやりがちです。もしくは片方大文字になっているとかですかね。

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のエラーは増えすぎたためページをわけました。

firebase(firestore)/nodo.jsのerror【エラーまとめ】
firebaseなどのエラーまとめです。 凡ミスも一応初心者向けに残しています。メモ魔のため一部個人的な覚書もかねています。command + Fで検索してください。 firebaseのエラー(error) firebas...

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の動画教材や書籍教材は経験則を元に、こちらの記事でまとめてあります。

vue.js/vuex/nuxt/firebaseのおすすめ入門本/動画
vue.js、vuex、nuxt、firebaseの入門本でおすすめはどれでしょう。おすすめ本だけではなく、動画講座やサンプルコードも紹介していきます。 現在、個人的にはvue.jsを使ってさらにnuxt.jsにステップアップしていま...

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

人気記事  安いオンラインプログラミングスクールおすすめ比較
  • 無料体験あり、オンライン完結あり
  • プログラミングスクールはオンラインで格安に!
  • 電子書籍並みの価格で買える動画学習サイトも一緒に紹介!初心者から上級者向け英語コンテンツまであり。ソースコードは言語関係なしに世界共通!
スポンサーリンク
おすすめのオンラインプログラミング学習
neruをフォローする
スポンサーリンク
ebookbrain

コメント

タイトルとURLをコピーしました