Firebaseのdatabaseからの読み込みができない。

Question

#実現したいこと
現在、React・Redux・Firebaseでタスク管理アプリを作っています。
###現在のコード

userActions.js（抜粋）

export const login = (type, email, password) => dispatch => {
  dispatch({type: "LOGIN"});
  switch (type) {
    case "EMAIL": {
      //FirebaseのAuth*1でログイン　ここは成功。
      firebase.auth().signInWithEmailAndPassword(email, password).then(result => { 
        const db = firebase.firestore();
        const uid = result.user.uid
        let name;

      //Firebaseのデータベース*2からユーザー名を取得（今後タスクなども取得予定）　ここでエラー
        db.collection("users").get().then(querySnapshot => {
          querySnapshot.forEach(doc => {
            name = doc.name;
            dispatch({type: "LOGIN_SUCCEEDED", uid: uid, name: name,});
            dispatch(push("/"))
          });
        }).catch(err => {
          dispatch({type: "LOGIN_REJECTED", error: err});
        });
      }).catch(err => {
        dispatch({type: "LOGIN_REJECTED", error: err.message});
      });
      break;
    }

    default: {}

  }

ここでは、おそらく問題が発生しているであろうプログラムだけ書きました。それ以外のコードは Github にあります。

**Firebase(Auth) *1 **

メールアドレス	プロバイダ	作成日	ログイン	ユーザーID
[e-mail]	Mail	2020/6/7	2020/6/7	HzqPgVr3WcOHvaGQdjaFix9M8pt1

**Firebase(データベース) *2 **

ユーザーID	name	doneTasks
HzqPgVr3WcOHvaGQdjaFix9M8pt1	pehalute	[]（配列）

#発生するエラー

Userがログインする部分で下のようなエラーがしてしまいます。

[2020-06-07T03:54:57.645Z]  @firebase/firestore: Firestore (7.15.0): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=unknown]: Fetching auth token failed: getToken aborted due to token change.
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. index.js:1

#試したこと

• your device does not have a healthy Internet connectionと書いてるのでネットワークを確かめたが、問題なく接続しており、同じFirebaseでもAuthには接続しているため、問題はないと判断。

• GithubのIssuesを参考に他に接続しようと試みたが、接続できるネットがないため断念。

• 同じ状況のブログを参考にfirebase-toolsをインストール

=>どれもうまくいかず。

#環境

• MacOS
• Firefox Developer Edition
• VSCode
• Node v12.16.1

---

FirebaseとReactというのが個人的に初めての組み合わせで手探りでやっているため、初歩的な問題かもしれませんが、よろしくお願いします。

Comments

[hoshi-takanori]

こちらでしょうか。Firebase のライブラルを古いものにしたら直るかも？
https://github.com/firebase/firebase-js-sdk/issues/3179

[ryuto.nakamura]

返信ありがとうございます。
firebaseやfirebasetoolsのバージョンを下げてみたのですが、変化はありませんでした。

[hoshi-takanori]

バグが確認されたようなのでそのうち直ると思います。
https://github.com/firebase/firebase-js-sdk/issues/3179#issuecomment-640933892

ところで、GitHub のリポジトリを見ると package-lock.json と yarn.lock の両方ありますが、npm と yarn どちらをお使いでしょうか？ そして、どうやって firebase のバージョンを下げましたか？

[ryuto.nakamura]

返信ありがとうございます。
npmを使っています。
yarnはcreate-react-appした時からあったのですがyarn.lockは消しても良いのでしょうか

[hoshi-takanori]

yarn を使わないのであれば yarn.lock は消して大丈夫です。

[ryuto.nakamura]

firebsaeのバージョンは、 npmで一旦アンインストールした後、適当なバージョンで再インストールしました。

[ryuto.nakamura]

>yarnは消して良い
わかりました。ありがとうございます。

[hoshi-takanori]

package.json に "firebase": "^7.15.0" とありますが、これを "firebase": "^7.14.2" にしても ^ が付いてると 7.15.0 になってしまう (実際にインストールされたバージョンは package-lock.json に記録されてます) ので、^ を消して npm i する必要があるかと。(なお、7.14.2 は先ほどの issue で正しく動くと報告されているバージョンです。)
https://qiita.com/sotarok/items/4ebd4cfedab186355867

[ryuto.nakamura]

返信遅くなって申し訳ございません。
"<=7.14.2"で再インストールしたところ、うまく行きました！
ありがとうございました。
ベストアンサーにしたいので、回答として同じ内容を書いていただけませんか？

Answer 1

firebase-js-sdk 7.15.0 にバグが見つかって、現在修正中のようです。
参考: https://github.com/firebase/firebase-js-sdk/issues/3179

とりあえず 7.14.2 に戻せば動くみたいですが、package.json に ^ を使って "firebase": "^7.14.2" と書くと 7.15.0 がインストールされてしまいますのでお気をつけください。
参考: package.json のチルダ(~) とキャレット(^) - Qiita

Comments

[ryuto.nakamura]

丁寧にありがとうございました。