Develop Reference

ReferenceError: Can't find variable: firebase . I can not connect the App to Firebase from Expo?

I am trying to create an App with a Database in which I will add several collections in Cloud Firestore.
but it is impossible, since the app was broken when I added the code to connect the app.
I've seen various solutions on Stack and GitHub, but after hours of testing, it doesn't work.
bud search
Firebase v9 modular - Can't find variable: IDBIndex
https://github.com/expo/expo/issues/8089
For now the Application is very simple, only two files are involved in Firebase and nothing works
I have changed the way to call Firebase in several ways:
import firebase from 'firebase/app'
import 'firebase/firestore'
import {initializeApp} from 'firebase/app'
import 'firebase/firestore'
import firebase from 'firebase/compat/app'
import 'firebase/compat/firestore'
Currently the code I have is the following:
import firebase from 'firebase/app'
import 'firebase/firestore'
const firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxx",
appId: "xxxxxxxxxxx"
}
export const firebaseApp = firebase.initializeApp(firebaseConfig)
file actions.js
import { firebaseApp } from "./firebase"
import firebase from 'firebase/app'
import 'firebase/firestore'
const db = firebase.firestore(firebaseApp)
export const isUserLogged = () => {
let isLogged = false
firebase.auth().onAuthStateChanged((user)=> {
user !== null && (isLogged = true)
})
return isLogged
}
And the errors that the console shows me:
**
TypeError: undefined is not an object (evaluating '_app.default.initializeApp')
- ... 9 more stack frames from framework internals
Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/#react-native/polyfills/error-guard.js:49:36 in ErrorUtils.reportFatalError
**
How can I correct this error?

You're importing functions from the newer modular SDK, but then are tryign to call the older namespaced APIs. That won't work.
I recommend using the code samples from getting started with Firebase Authentication on the web, getting the currently signed in user and the upgrade guide.
With the new modular syntax, you can build a function that returns a promise with first auth state with:
import { initializeApp } from "firebase/app";
import { getAuth, onAuthStateChanged } from "firebase/auth";
const firebaseConfig = {
// ...
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
export const isUserLogged = () => {
return new Promise((resolve, reject) => {
let unsubcribe = onAuthStateChanged(auth, (user) => {
unsubcribe();
resolve(user !== null)
})
});
}
If you want to stick to using the namespaced API, you can either import an older version of Firebase (e.g. the latest v8 release) or use the compat path for the new SDK, in the same upgrade guide I linked above.

"Field Value is not a function" when I try to use the increment feature

I am trying to implement some simple thumbs up/thumbs down functionality in a react app using cloud firestore. The app lets users search for movies and give it a thumbs up or down, and then I want to increment the value in my frestore database. When I try to do this I'm given the error "FieldValue is not a function".
Here is my code in the component:
import {db}from './firebase'
const firebase = require("firebase/firestore");
const movieDocRef = db.collection("ratings").doc(title);
const increment = firebase.FieldValue.increment(1);
movieDocRef.update({thumbsUP: increment})
And here is my firebase config file
const firebase = require("firebase");
// Required for side-effects
require("firebase/firestore");
const config = {
//my config data all should fine
};
export const fire = firebase.initializeApp(config);
export const db = fire.firestore();
Would appreciate any help you can give. I've looked at a few similar topics and nothing seems to have resolved this

Since you are using react, I suggest reviewing the documentation for getting started with Firebase using module bundlers. Your imports should look more like this when using version 8.0.0 or later of the Firebase SDKs:
import firebase from "firebase/app";
import "firebase/firestore"
const movieDocRef = firebase.firestore().collection("ratings").doc(title);
movieDocRef.update({ thumbsUP: firebase.firestore.FieldValue.increment(1) })

Possible Unhandled Promise Rejection (id: 20): TypeError: _util.base64.tI is not a function. React Native

I am building an app using react native, I use firebase as my database. Everything was working fine. I started running the app on my device through Xcode. It worked but now I get this warning on my device and simulator which prevents me from getting data from firebase database. the warning is
"Possible Unhandled Promise Rejection (id: 20):
TypeError: _util.base64.tI is not a function. (In '_util.base64.tI(t, !1)', '_util.base64.tI' is undefined)"
I don't know where did this (_util.base64) come from. I guess the problem has to do with this code part (the promise) as when I remove this part it works fine but unable to get data without it. can anyone help?
useEffect(() => {
db.collection("Appointments")
.orderBy("Timing", "desc")
.limit(2)
.get()
.then((querySnapshot) => {
const list = [];
querySnapshot.forEach((doc) => {
const { Speciality, Date, TimeSlot } = doc.data();
list.push({
id: doc.id,
Speciality,
Date,
TimeSlot,
});
});
setAppointments(list);
})
.catch((error) => {
alert(error.message);
console.log(error);
});
}, []);
This is the warning that shows up
Those are my dependencies

What I did to solve it was:
run expo install firebase
Create a config.js file where I put my Firebase credentials:
import * as firebase from 'firebase';
// Initialize Firebase
var firebaseConfig = {
//Your Firebase credentials
};
var app = firebase.initializeApp(firebaseConfig);
export const db = app;
And import that file wherever I need it
import { db } from '../config';
//Here's where I call firestore (You can also do this in the config file)
import 'firebase/firestore';
db.firestore().
collection('your_collection').get().then(
//The stuff you want to do
);
At least, now it works for me.
In this link you can see the oficial expo with firebase documentation

firebase.storage() takes either no argument or a Firebase App instance

Actually, the title is more or less the whole explanation of the problem.
I am trying to use Firebase inside my React app, which also uses NextJS and the problem is that I cannot get storage to work.
import firebase from 'firebase'
import uuid from 'uuid/v4'
// Init
try {
firebase.initializeApp({
apiKey: 'apiKey',
authDomain: 'authDomain',
databaseURL: 'dbUrl',
projectId: 'projID',
storageBucket: 'storageBucket',
messagingSenderId: 'id'
})
} catch (err) {
if (!/already exists/.test(err.message)) {
console.error('Firebase initialization error', err.stack)
}
}
console.log(firebase.app().name) // <- name
// References
const database = firebase.database()
const storage = firebase.storage().ref() // <- the problem
const documentImageStorage = storage.child('images/')
const documentsRef = database.ref('/documents/')
const documentsRequestsRef = database.ref('/requests/')
So, as I run the code I can confirm that the app works as the database works properly and the name ([default]) is returned correctly, but the line in which the storage reference is defined returns an error:
Firebase: firebase.storage() takes either no argument or a Firebase App instance. (app/invalid-app-argument).
Any ideas why this might happen? How can I solve it?

(Firebase Storage JS dev)
I was able to reproduce your error in Next.js. I'm not super familiar with it, but I understand Next.js does React-y server-side rendering, so the code you write for your page will generally be executed in the node server.
Unfortunately, Storage isn't supported in node right now, which includes server-side rendering contexts (feel free to leave a comment in the Github issue about your use case).
It should work in normal React apps (i.e. client-side code) though.
EDIT: found a (barely) workaround
The code appears to not crash in Next.js if you add an import at the top of the file:
import firebase from 'firebase'
import _s from 'firebase/storage'
import uuid from 'uuid/v4'
...
Regardless, the Storage library still isn't supported in node. Most anything interesting (uploading objects, getting object metadata) won't work, so unless all you wanted to do was call storage.toString() somewhere this probably doesn't solve your problem.

Firebase docs states that you save storage service reference to variable, then save storage reference to different variable.
https://firebase.google.com/docs/storage/web/create-reference
So I would do this like so:
const storage = firebase.storage();
const storageRef = storage.ref();
You can also put path to your storage folder to get reference for it, like this:
const documentImageStorage = storage.ref('/images/');

Ok, so I figured out how to make it work!
export const storage = process.browser ? firebase.storage().ref() : undefined
This way, storage part, which is unavailable on the backend isn't loaded, but on the frontend it is and everything works perfectly!
Thanks for both answers!

undefined is not an object firebase.auth.FacebookAuthProvider.credential

Here is my code.. its pretty simple.. just trying to allow a user to authenticate through facebook and then add it to the Firebase system!
I should mention that I am using React Native, I did read that various parts of the Firebase library does not work with React Native.
const auth = firebase.auth();
const provider = firebase.auth.FacebookAuthProvider;
LoginManager.logInWithReadPermissions(['public_profile'])
.then(loginResult => {
alert("login results")
if (loginResult.isCancelled) {
alert('user canceled');
return;
}
AccessToken.getCurrentAccessToken()
.then(accessTokenData => {
const credential = firebase.auth.FacebookAuthProvider.credential(accessTokenData.accessToken);
alert("Credential: " + credential )
return auth.signInWithCredential(credential);
})
.then(credData => {
console.log(credData);
alert("CRED data:::" + credData)
alert(firebase)
})
.catch(err => {
console.log(err);
alert("ERROR:::" + err)
alert(firebase)
});
});
The only reasoning I can really think of for this is that Firebase is undefined or it does not finish initializing.. although it seems to be.. maybe I can put in some sort of promise to ensure it has initialized.
(Any ideas on how to do that?)
Although firebase seems to be initalized.. but I went through the api reference and can't really find any reason why .auth.FacebookAuthProvider.credential would not exist
Any help would be great!

I was having this exact same issue, and I have a solution that worked for me, but I'm not sure if it will be the same for you.
I was instantiating my firebase class through a separate module, in a file called FirebaseService.js
'use-strict';
const firebase = require('firebase');
const APP_BASE = 'https://your-unique-url.firebaseapp.com/'
const FIREBASE_CONFIG = {
apiKey: '[super_unique]',
authDomain: 'your-unique-url.firebaseapp.com',
databaseURL: APP_BASE,
storageBucket: 'your-unique-url.appspot.com',
};
export const Firebase = firebase.initializeApp(FIREBASE_CONFIG);
I was then using it everywhere else in my code by importing it:
const { Firebase } = require ('./services/FirebaseService');
This appeared to be fine until I got around to implementing facebook login, and that's when I started having the same issue.
I had to import firebase in the screen that was trying to login with facebook. instead of requiring my own service, I used the npm module:
const firebase = require('firebase');
After that, I was able to access FacebookAuthProvider.credential. I'm really not sure why this is the case, there may have been something wrong with my use of modules