Cant find variable firebase react native

I’ve been working with Firebase Cloud Messaging for the last couple of months and it has been a pure pleasure! I always enjoy using Firebase, since I find it so user-friendly combined with great documentation.

But something went completely wrong.

Since I’ve been during all the development on my MacBook and even made the messaging look great on phone using inspect mode, it was ready for launching.

After it went out on the staging URL, I tested it on an android tablet. It looked just the way it should.

But then I took my iPhone… And got a blank page.

Why? What? But how? What is happening?

First in Safari, then I opened with Chrome - still blank.

Since this was running just fine in inspect mode on the laptop, I was really curious about what went wrong. So I connected with USB and opened Safari console from iPhone. And saw this error message.

ReferenceError: Can't find variable: Notification

Of course, I went straight to Google. How could this be, when it works on every other device I’ve tested on.

It didn’t take long before I found this documentation, telling me that iOS Safari is not supported using Firebase Cloud Messaging

See supported environments here: https://firebase.google.com/docs/web/environments-js-sdk

Well, this was of course terrible news. But I was lucky, because most users of this internal web application, are using a laptop.

But it happens rarely, that users are visiting the website on iPhone and we want to prevent blank page - well aware that Cloud Messaging is not an option.

To solve this, I need to figure out if it was iOS or not. I did this with these few lines of code

function isIOS() {
const browserInfo = navigator.userAgent.toLowerCase();

if (browserInfo.match('iphone') || browserInfo.match('ipad')) {
return true;
}

if (['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform)) {
return true;
}
return false;
}

I use this function, every time I need to use the Notification variable.

Let’s say I need to check if Notification permission is granted

function isGranted() {
if (isIOS()) return;
return Notification.permission === "granted"
}

And you will avoid your app crashing.

I hope you found this article useful

Privacy & Transparency

We and our partners use cookies to Store and/or access information on a device. We and our partners use data for Personalised ads and content, ad and content measurement, audience insights and product development. An example of data being processed may be a unique identifier stored in a cookie. Some of our partners may process your data as a part of their legitimate business interest without asking for consent. To view the purposes they believe they have legitimate interest for, or to object to this data processing use the vendor list link below. The consent submitted will only be used for data processing originating from this website. If you would like to change your settings or withdraw consent at any time, the link to do so is in our privacy policy accessible from our home page.

I am using firebase auth in my React-native But I am facing the following error: ReferenceError: Can’t find variable: IDBIndex. We are going to Learn about All Possible Solutions So Lets Get Start with This Article.

How ReferenceError: Can’t find variable: IDBIndex Error Occurs ?

I am using firebase auth in my React-native But I am facing the following error.

ReferenceError: Can't find variable: IDBIndex

So here I am writing all possible solutions that I have tried to resolve this error.

How To Solve ReferenceError: Can’t find variable: IDBIndex Error ?

  1. How To Solve ReferenceError: Can't find variable: IDBIndex Error?

    To Solve ReferenceError: Can't find variable: IDBIndex Error Firebase 8.2.3 is working fine so you can Use Firebase 8.2.3 and then your error should be fixed.

  2. ReferenceError: Can't find variable: IDBIndex

    To Solve ReferenceError: Can't find variable: IDBIndex Error Here I am facing this issue in firebase's latest version. So Just downgrading firebase is working fine. Use “firebase”: “9.6.7” and now Your error must be solved. First of all delete node_modules. Then delete yarn.lock Now, downgrade firebase to “9.6.7” yarn add . Then download the package using yarn install. Now, your error must be solved. Thank You.

Solution 1: Downgrade firebase

Here I am facing this issue in firebase’s latest version. So Just downgrading firebase is workingfine. Use "firebase": "9.6.7" and now Your error must be solved.

  1. First of all delete node_modules.
  2. Then delete yarn.lock
  3. Now, downgrad firebase to “9.6.7” yarn add
  4. Then download package using yarn install
  5. Now, your error must be solved. Thank You.

Solution 2: Use Firebase 8.2.3

Firebase 8.2.3 is working fine so you can Use Firebase 8.2.3 and then your error should be fixed.

Summary

It’s all About this error. Hope We solved Your error. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also, Read

  • npm ERR! code UNABLE_TO_GET_ISSUER_CERT_LOCALLY

Can't find variable Idbindex Firebase react native?

It's because you have enabled Google Analytics for your app. Disable Analytics from the Firebase settings and again copy the Firebase file data from Firebase and replace it with the old firebase.

Does Firebase work with react native?

To get started, you must first setup a Firebase project and install the "app" module. React Native Firebase is the officially recommended collection of packages that brings React Native support for all Firebase services on both Android and iOS apps.