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

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"

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)

その他のエラー(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

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

TypeError: set is not a function

TypeError: set is not a function

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

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

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