Develop Reference

React-Native Expo (Managed) Firebase IDBIndex Error [duplicate]

I am developing a RN app in Expo with firebase as backend. So far, the app only uses firebase auth and firestore and for whatever reason, I randomly started getting the error of ReferenceError: Can't find variable: IDBIndex. I adjusted my firebase config to suit the v9 standards instead of using the compat package. I ensured my app was not using Google Analytics. I have also downgraded to firebase#9.1.0 which matches up with the expo documentation and this other similar post.
I have also git reverted into previous versions of the app (with earlier dependencies and code) when it was working but still got back the same error. When this occurred, I entirely reinstalled node and npm because I thought that was the only other possible reason this could be happening but that was to no avail as well (getting the same IDB error). I still think this is a firebase related issue, but I am pretty much all out of ideas as to what it could be.
Here is my firebase config:
import { initializeApp } from 'firebase/app'
import { getAuth, connectAuthEmulator } from "firebase/auth";
import { getFirestore, connectFirestoreEmulator } from "firebase/firestore";
import {
FIREBASE_API_KEY,
FIREBASE_AUTH_DOMAIN,
FIREBASE_PROJECT_ID,
FIREBASE_STORAGE_BUCKET,
FIREBASE_MESSAGING_SENDER_ID,
FIREBASE_APP_ID,
FIREBASE_MEASUREMENT_ID,
} from '#env';
const firebaseConfig = {
apiKey: FIREBASE_API_KEY,
authDomain: FIREBASE_AUTH_DOMAIN,
projectId: FIREBASE_PROJECT_ID,
storageBucket: FIREBASE_STORAGE_BUCKET,
messagingSenderId: FIREBASE_MESSAGING_SENDER_ID,
appId: FIREBASE_APP_ID,
measurementId: FIREBASE_MEASUREMENT_ID,
};
const app = initializeApp(firebaseConfig);
export default app;
export const auth = getAuth(app);
export const firestore = getFirestore(app);
if (process.env.NODE_ENV === "development") {
connectAuthEmulator(auth, "http://localhost:9099");
connectFirestoreEmulator(firestore, "localhost", 8080);
}
Do let me know if you need to see more files or need to know more details.

firebaser here
There was a problem in our JavaScript SDKs, where Firebase Installation Services used a version of IDB that doesn't support ESM outside of browser environments. The issue has been fixed in version 9.6.9 of the JavaScript SDK, so be sure to update to that.

I'm getting the same issue, looks like, it's breaking on "firebase": "^9.6.8", which was released a few days ago. Use "firebase": "9.6.7",

I've been getting the same issue, I've tried all the same things as you to no avail. I symbolicated the logs from firebase test lab and came up with this:
Stacktrace
Generally I have no idea how all of these libraries work together, but are you using typesense with firestore? I wonder if your stack trace calls out the same files, but I can't find any smoking gun here. I'll keep updating this thread if I find something. (I would have commented but I don't have the rep yet)
Update: Looks like my build just fixed itself somehow, even submitting builds from this weekend that would constantly crash. So truly I'm not sure what happened but it may be resolved

I had the same issue, my solution was to downgrade the Firebase version from 9.6.8 to 8.2.3.
Here is a reference that could be helpful.
https://github.com/expo/expo-cli/issues/3066

I had this same issue, and after trying multiple different firebase versions, this is the one that fixed the error for me:
npm install firebase#9.4.1 --save
Here's where I found this: Get Started with Cloud Firestore

The other fixes mentioned in this thread are definitely all valid (I have seen other forum posts suggesting the firebase downgrade but in my case it did not work.)
I thought it could be helpful for me to confirm what fixed the problem in my case. The problem arose from when one of my team members used npm instead of expo (which defaults to yarn) to install a dependency. This caused syncing issues between the yarn.lock and package-lock.json. This alone wouldn't have caused much of an issue because a simple yarn or yarn install <dependency> would have solved the issue. However, this dependency happened to require pre-existing dependencies which were of a different version then the ones "expected" by my version of expo. How this IDBIndex error was triggered is still a mystery to me, but in the end all I had to do was remove all my lock files and node_modules, perform an expo updateand finally do a yarn to reinstall all now-compatible packages.
If anyone stumbling across this answer can give a possible explanation as to why this fixed things, that would be much appreciated.

Here is what worked for me (using yarn):
deleted node_modules
deleted yarn.lock
downgraded to firebase "9.6.7" yarn add firebase#9.6.7
downloaded packages using yarn install
made sure all my imports are from the correct firebase library. I am using expo, and I had imported both firebase and react-native-firebase, which was causing trouble. I deleted react-native-firebase for now until I eject if needed.
Fixed my imports. Now you import firebase like this import firebase from "firebase/compat"

if you use firebase analytics, remove it
firebase version "firebase": "9.6.7"
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
// import { getAnalytics } from "firebase/analytics";
const firebaseConfig = {
apiKey: process.env.FIREBASE_APP_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.FIREBASE_APP_ID,
measurementId: process.env.FIREBASE_MEASUREMENT_ID,
};
export const app = initializeApp(firebaseConfig);
// export const analytics = getAnalytics(app);
export const firestore = getFirestore(app);

Had the same issue, I just downgraded firebase version and it worked.
you can use this code for downgrading:
npm install firebase#9.4.1 --save

This worked for Expo:
https://github.com/firebase/firebase-js-sdk/issues/6253#issuecomment-1123923581
// metro.config.js
const { getDefaultConfig } = require("#expo/metro-config");
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.assetExts.push("cjs");
module.exports = defaultConfig;

.env Environment variables not being used

I am trying to deploy my react web app to Firebase. I have a github workflow setup in order to deploy to a preview channel when pull request is created, and then when it is merged it will deploy that to be live. I have my firebase api key and other details stored in a .env file, which is in my .gitignore as to not check that into the git repository. However, these variables are not being used when the app is deployed to firebase. A blank page is displayed and an error in the console saying that an incorrect API key is being used and to please use correct api key. However, if I hardcode the exact same value into the config for firebase directly, it works without any issue. Any ideas on how to fix this? The .env example and how I am using it is below. (without the actual values in .env file of course). Also, the .env file is in the root of the project as well.
.env sample:
REACT_APP_API_KEY={{value}}
REACT_APP_AUTH_DOMAIN={{value}}
REACT_APP_DATABASE_URL={{value}}
REACT_APP_PROJECT_ID={{value}}
REACT_APP_STORAGE_BUCKET={{value}}
REACT_APP_MESSAGING_SENDER_ID={{value}}
firebase.js
const config = {
apiKey: process.env.REACT_APP_API_KEY,
authDomain: process.env.REACT_APP_AUTH_DOMAIN,
databaseURL: process.env.REACT_APP_DATABASE_URL,
projectId: process.env.REACT_APP_PROJECT_ID,
storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
};

I think that you should add .production at the end of the .env filename. It becomes .env.production,then build and deploy.

How to initiate Firebase Analytics to work on Web?

I have initiated a FB SDK in the project following the documentation:
Getting started with Analytics is easy. Just add the Firebase SDK to your new or existing app, and data collection begins automatically. You can view analytics data in the Firebase console within hours.
Here is my main.js
// Production Firebase configuration
firebaseConfig = {
apiKey: <AKI_LEY>,
authDomain: <DOMAIN>,
databaseURL: <DB_URL>,
projectId: <PROJECT_ID>,
storageBucket: "",
messagingSenderId: <SENDER_ID>,
appId: <APP_ID>,
measurementId: <TRACKING_ID>
};
firebase.initializeApp(firebaseConfig);
// missing firebase.analytics(); but calling this in main will throw exception. Calling this in index.html will also throw exception as initializeApp has to be called before.
This allows the application to work with firebase Storage and Auth services but analytics is still not registering anything.
What am I missing?
EDIT
After reading more documentation and double checking my index, I added the following <scripts> but with no prevail.
<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
<script src='https://www.gstatic.com/firebasejs/7.5.0/firebase-analytics.js'></script>
The problem
Default webpack firebase import doesn't have firebase analytics libraries, that's why you need to import using CDN.
After import in index I still need to run firebase.analytics() but that has to follow firebase.initializeApp().
How can one call both in the main.js so that firebase functions are not separated between index and main?
Also my main includes more logic to decide on the firebase config setup (have multiple projects) so I cannot just move all the firebase actions into index.html.
Thanks.

This was an issue with how the firebase library was structured. It was fixed in 7.1.0 and the analytics package is now included.
Link to firebase github issue.
Here is the summary how I got it working:
index.html
...
<body>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-analytics.js"></script>
...
main.js
import * as firebase from 'firebase/app';
...
firebase.initializeApp(firebaseConfig);
firebase.analytics();
...
This resulted in getting stats on firebase. It took 2 days for it to propagate.

For Analytics to work in your Firebase app, you'll need to include the SDK.
A common way to do this is with:
<script src='https://www.gstatic.com/firebasejs/7.5.0/firebase-analytics.js'>
But of course any other way of including the necessary file is fine too. Be sure to check what the latest version of the SDK is, under available libraries in the documentation.

I have both included, the codes are fine and no errors, but I can't find the analytics data in the dashboard and can't check the events I sent. Are you able to see this?

use cdn
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-analytics.js"></script>
or use import
npm install --save firebase
// Firebase App (the core Firebase SDK) is always required and must be listed first
import firebase from "firebase/app";
// If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
// import * as firebase from "firebase/app"
// If you enabled Analytics in your project, add the Firebase SDK for Analytics
import "firebase/analytics";
// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";
init
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
apiKey: "API_KEY",
authDomain: "PROJECT_ID.firebaseapp.com",
databaseURL: "https://PROJECT_ID.firebaseio.com",
projectId: "PROJECT_ID",
storageBucket: "PROJECT_ID.appspot.com",
messagingSenderId: "SENDER_ID",
appId: "APP_ID",
measurementId: "G-MEASUREMENT_ID",
};
docs
https://firebase.google.com/docs/web/setup

Firebase analytics log event not working in production build of electron

I used a firebase package for using realtime DB and I want to implement firebase analytics so I used the same package and write code for analytics
import * as firebase from 'firebase'
import 'firebase/analytics'
import { fireBase } from 'configs/config'
const config = {
apiKey: fireBase.REACT_APP_FIREBASE_API_KEY,
authDomain: fireBase.REACT_APP_FIREBASE_AUTH_DOMAIN,
databaseURL: fireBase.REACT_APP_FIREBASE_DATABASE_URL,
projectId: fireBase.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: fireBase.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: fireBase.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
appId: fireBase.REACT_APP_FIREBASE_APP_ID,
measurementId: fireBase.REACT_APP_MEASUREMENT_ID,
}
firebase.initializeApp(config)
export const defaultAnalytics = firebase.analytics()
export default firebase
after that, I imported defaultAnalytics in the file where I needed it and put that code to log the event for analytic purposes
defaultAnalytics.logEvent('profile_update')
It is working in development perfectly but not working in the production mode

There is issue like in electron, When we run app in development mode it will log firebase event easily because the app is run on localhost:3000 so a event will work.
But when we create a build for mac/windows it will not log the event because firebase package work when a build run on http protocol and our electron app production build run a file:// protocol.
So here we have to use Measurement Protocol, In that we need to create a separate property in firebase app.
Steps for creating a property:
Go to analytics.google.com then create a firebase app.
click on Create property and choose website option.
The provide a website URl and name of property name.
After the you will get a tracking info.In that a tracking code will be available.
Then use universal-analytics in main Processes.
Here is the complete implementation.
https://kilianvalkhof.com/2018/apps/using-google-analytics-to-gather-usage-statistics-in-electron/

Can't run new firebase in node

I'm following along with this talk from google. However I can't instantiate a firebase object.
I have a package.json file and started with:
npm install firebase --save
Then did the following:
let Firebase = require('firebase');
let myFire = new Firebase('[link to my app]');
However, when I run the johhny-five app from terminal, I get the error: Firebase is not a function.
How am I supposed to intstantiate the object? Did Firebase change their API?
Note: I injected it into the repl and running >> typeof Firebase I get that it's actually an 'object'.

Yes, they changed the API, take a look: Upgrade your Web / Node.js app from Firebase.com.
This is how you do it now:
// See https://firebase.google.com/docs/web/setup#project_setup for how to
// auto-generate this config
var config = {
apiKey: "apiKey",
authDomain: "projectId.firebaseapp.com",
databaseURL: "https://databaseName.firebaseio.com"
};
firebase.initializeApp(config);
var rootRef = firebase.database().ref();
To get the config values, go to the URL at the top of the previous code, Add Firebase to your Web Project, which guides you to do the following:
To add Firebase to your app, you'll need a Firebase project and a short snippet of code to add to your application HTML that has a few details about your project.
Create a Firebase project in the Firebase console, if you don't already have one.
If you already have an existing Google project associated with your app, click Import Google Project. Otherwise, click Create New Project.
If you already have a project, click Add App from the project overview page.
Click Add Firebase to your web app.
Click Copy, then paste the code snippet into your application HTML.