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

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

凡ミスも一応初心者向けに残すことにして、一部、個人的な覚書もかねています。

vue.jsのエラー(error)

エラーも覚書程度に残しておきます。

vue.runtime.esm.js:619 [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が必要なのにない。

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の再起動でなおりました。

javascriptのエラー(error)

Maximum call stack size exceeded

Maximum call stack size exceeded

スタックのサイズがオーバーした状態。

returnでミスったり、関数内でうっかり名前がかぶって再帰処理をしていたり。

computed: {
  name() {
    const str = this.name
  }
}

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

その他のエラー(error)

Error occurred while trying to proxy request

[HPM] Error occurred while trying to proxy request //server/app from local:3000 to http://127.0.0.1:8080 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)[HPM] Error occurred while trying to proxy request //server/app from local:3000 to http://127.0.0.1:8080 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)

このエラーはプロキシを使ったときにでます。フロントエンドを立ち上げたとき、サーバーを起動していないか、間違った番号のポートで起動したかです。サーバーを起動していない場合、ターミナルをもうひとつ開き、

node server/app.js

みたいなコマンドでサーバーを起動しましょう。

firebaseのエラー(error)

firebaseのよくあるエラーまとめです。

Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field xxx)

Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field xxx)

うっかりりミスでした。vue側から引数が渡っておらず未定義でした。

JsonProtoSerializer.push../node_modules/@firebase/firestore/dist/…

JsonProtoSerializer.push../node_modules/@firebase/firestore/dist/index.cjs.js.JsonProtoSerializer.fromRpcStatus

firebaseが期限切れになるとエラーがでました。このほかの原因でもこのようなエラーがでるかもしれませんが、期限切れかもしれない場合は期限切れを疑ってみましょう。ルールの変更することにより改善されます。

Uncaught (in promise) FirebaseError: Missing or insufficient permissions.(ブラウザのエラー)

Uncaught (in promise) FirebaseError: Missing or insufficient permissions.

firebaesのルールの設定がおかしいです。アクセス許可されていません。

もし許可しているはずなのに通らない場合は、usersがuserになっているなど、凡ミスがないか疑ってください。パスが1文字でも違うと当然通りません。

Firebase: Firebase App named ‘[DEFAULT]’ already exists (app/duplicate-app).

firebase.initializeAppが複数回呼ばれているらしい。

Uncaught ch {code: “auth/unauthorized-domain”, message: “This domain (XXX) is not authorized …se console -> Auth section -> Sign in method tab.”}

Uncaught ch {code: "auth/unauthorized-domain", message: "This domain (XXX) is not authorized …se console -> Auth section -> Sign in method tab."}

認証のエラーですね。ドメインの変更を行いませんでしたか。firebaseの管理画面から以下の操作を行ってください。

Authentication > ログイン方法 > ドメイン > ドメインの追加

This domainに書かれたドメインを追加します。

{code: “auth/invalid-credential”, message: “Error getting request token: 401 {“errors”:[{“code…://XXX.firebaseapp.com/__/auth/handler”}

{code: "auth/invalid-credential", message: "Error getting request token: 401 {"errors":[{"code…://XXX.firebaseapp.com/__/auth/handler"}

apiキーの再生成をしていませんか？apiキーでコケています。

Authentication > ログイン方法 > ドメイン > 該当サービスの鉛筆の編集アイコン

apiキーを確認し、間違っていたら入れなおしましょう。

FirebaseError: Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field

FirebaseError: Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field

つまらない単純エラーです。未定義の値を格納しようとしているため、削るか値がちゃんと入るようにしましょう。

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

TypeError: set is not a function

TypeError: set is not a function

ドキュメントID(.doc)などの指定を疑いましょう。

Firestore backend. Backend didn’t respond within 10 seconds.

@firebase/firestore: Firestore (7.14.3): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds.This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.

ちょっと通信を絡む作業をしていたため、いったん全部そちらをコメントアウト→改善されませんでした。

vs codeを再起動→改善されませんでした。
pcの挙動も怪しく、たまたまmacも再起動したかったのでmacを再起動→改善されました。

深くは調べていないので、わかりませんが直近追加したプラグインなどもあれば疑ってもいいかもしれません。参考程度に。

nodo.jsのサーバーサイドのエラー(error)

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

凡ミス。res.send(‘テスト’)などを2回している文法エラー。eslintでも確認できます。

nuxt/vuex/vue/firebase/typescriptの動画教材など

nuxt/vuex/vue/firebase/typescriptの動画教材や書籍教材はこちらの記事にまとめてあります。

vue.js/vuex/nuxt/firebaseのおすすめ入門本/動画

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

ebookbrain.net

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