【ReactNative】FirebaseStoreの設定でcryptoが無いと怒られた

こんにちは。やらしみずです。

先日リリースした元素記号早押しアプリ & 数字の早押しアプリにランキング機能を付ける関係で、Firebaseのデータベース？、FireStoreの設定をしている時に小一時間ハマってしまったエラーがあったので備忘録を残しておきます。

エラー
対応方法1
対応方法2
おまけ
最後に

エラー


// firebaseをインストール
$ expo install firebase

// App.js等のファイルにFirebaseの設定を書く
$ emacs App.js
→ FirebaseのDocを見ながら設定

$ expo start
→ iosシュミレーターを起動

// エラー表示される
[Unhandled promise rejection: ReferenceError: Can't find variable: crypto]
...
...

// firebaseをインストール

$ expo install firebase

// App.js等のファイルにFirebaseの設定を書く

$ emacs App.js

→ FirebaseのDocを見ながら設定

$ expo start

→ iosシュミレーターを起動

// エラー表示される

[Unhandled promise rejection: ReferenceError: Can't find variable: crypto]

...

対応方法1

私が使っているFirebaseのバージョンが、firebase 7.13.0だったのですが、firebase 7.9.0より上のバージョンを使っていると、次のエラーが出るらしいです。
なので、素直にバージョンを下げてみます。


// 既存のバージョンを削除
$ npm remove firebase
// 安定しているやつ？をインストール
$ npm install --save firebase@7.9.0

// 既存のバージョンを削除

$ npm remove firebase

// 安定しているやつ？をインストール

$ npm install --save firebase@7.9.0

ちなみに、他にも以下のようなエラーが出てくることもあるようですが、同じ対応で良さそうです。


[Unhandled promise rejection: ReferenceError: Can't find variable: atob]
...

[Unhandled promise rejection: ReferenceError: Can't find variable: atob]

...

対応方法2

対応方法1で解決するとStackOverflowには書いてあったのですが、それでもうまく行かない、、、

というときは、キャッシュの問題かもしれません。

私はそうだったようで、

1.キャッシュの削除


expo start -c

expo start -c

2.端末(エミュレーター)の再起動

3.MacPC自体の再起動

の3つをやって、3つ目でやっとエラーが解消されました。

おまけ

Firebase側でルールを変更していないと次のエラーが出ます。


[Unhandled promise rejection: FirebaseError: Missing or insufficient permissions.

[Unhandled promise rejection: FirebaseError: Missing or insufficient permissions.

パーミッションを変更してあげることで動作するようになります。


// （設定例)
// ちなみにこの設定だと誰でもID等を知っていればアクセス出来てしまうので、後で適切な設定に変更する必要あります。
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}