nuxt/vuex/vue/firebaseのerror【エラーまとめ】

おすすめのオンラインプログラミング学習

2021.02.07

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

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

1 vue.jsのエラー(error)
2 vuexのエラー(error)
3 javascriptのエラー(error)
- 3.1 ‘a’ is constant
- 3.2 Maximum call stack size exceeded
4 firebaseのエラー(error)
- 4.1 FirebaseError: Function CollectionReference.doc() requires its first argument to be of type non-empty string, but it was: a custom Object object
5 CSSのエラー(error)
- 5.1 This relative module was not found:
6 その他のエラー(error)
- 6.1 there are multiple modules with names that only differ in casing
7 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の小文字大文字が一致していない場合もでます。

dataではなく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]: 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

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

TypeError: handler.call is not a function

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

TypeError: handler.call is not a function

(例)

mounted: {},
created: {},

↓

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

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)

‘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()

CSSのエラー(error)

This relative module was not found:

This relative module was not found:

画像の読み込みのエラーなのですが、CSSのパスは次のように書かないとダメなようです。

/* NG
background: url(~/assets/images/test.jpg) repeat-x;
background: url('~/assets/images/test.jpg') repeat-x; */

/* OK */
background: url('../assets/images/test.jpg') repeat-x;
background: url("../assets/images/test.jpg") repeat-x;

srcなどでこう指定するから紛らわしいです。

src="~/assets/images/test.jpg"

その他のエラー(error)

there are multiple modules with names that only differ in casing

there are multiple modules with names that only differ in casing

画像読み込みのWARNですね。画像ファイル名とコードの大文字と小文字が揃っていないとwarningがでます。

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にステップアップしていま...

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