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

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

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

1 vue.jsのエラー(error)
2 vuexのエラー(error)
3 javascriptのエラー(error)
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)
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の小文字大文字が一致していない場合もでます。

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

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() {},

[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に修正します。

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

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

Uncaught TypeError: Cannot read property ‘length’ of undefined

Uncaught TypeError: Cannot read property 'length' of undefined

未定義エラーです。該当ファイルが表示されているはずなので、そのファイルをみてみましょう。

プラグインファイルのエラーの場合、importすることにより、別の場所に影響が及ぼすことがあります。

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がでます。

SyntaxError: Unexpected token u in JSON at position 0

SyntaxError: Unexpected token u in JSON at position 0

JSON.parse()しちゃいけないところでJSON.parse()しています。

undefinedをJSON.parse()すると、このエラーがでます。

Already included file name ‘pass’ differs from file name ‘pass’ only in casing.

Already included file name 'pass' differs from file name 'pass' only in casing.
  The file is in the program because:
    Root file specified for compilation
    Imported via

でも、あっているはず。直近でファイル移動したことを思い出しました。VS Codeを再起動したらこのエラーは消えました。

他の修正が必要な場合もあるような気がします。

error The “xxx” component has been registered but not used vue/no-unused-components

error  The "xxx" component has been registered but not used  vue/no-unused-components

凡ミス。html側にコンポーネントが使われていない。ありがちなのは大文字と小文字の違いで検索が判別しない設定になっていた。

nuxtのhot-update.json timed out.

このエラーがでると再読み込みしても更新されません。nuxtででるんですが、nuxtのエラーではないようです。

このエラーは厄介です。よい解決方法があればコメント欄で教えてもらいたいぐらいです。

bootstrap:91 Uncaught (in promise) Error: Manifest request to /_nuxt/9e79fa2e96c521c45443.hot-update.json timed out. at XMLHttpRequest.request.onreadystatechange (bootstrap:91)

エラーがでるとnpm run devしなおしてもまたエラーがでます。いろいろやったのですが、簡単で有効な手段としてポート番号を変えることです。