firebase is not defined in react native - firebase

I have a simple react native app. And I have firebase authentication other and firebase functions like(signIn,signUp).
It works fine in the App.js but when I try to import all firebase stuff from another file that I created "Firebase.js", it gives error. Says
firebase is not defined
What is the solution?

try this into your Firebase.js file
import * as firebase from 'firebase';
const firebaseConfig = {
apiKey: "-",
authDomain: "",
databaseURL: "",
storageBucket: "",
messagingSenderId: "",
}
firebase.initializeApp(firebaseConfig);
export default firebase;
then import firebase from 'your file path'

Related

Snack expo firebase/firestore error react native

Trying to run a react-native app (works locally!) on snack expo, but comes up with various error messages.
The first issue I think that snack expo is not ready using firebase sdk v9+, so I changed it from "firebase": "^9.16.0" to "firebase": "8.2.3" as someone suggested here.
But it means I have to change the firbase config file accordingly but I couldnt find much source to go on, so i probably made a few mistakes. This also comes up with and error and im not sure if what step I need to take next.
firebase config (^9.16.0)
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import Constants from 'expo-constants';
const firebaseConfig = {
apiKey: Constants.manifest.extra.apiKey,
authDomain: Constants.manifest.extra.authDomain,
projectId: Constants.manifest.extra.projectId,
storageBucket: Constants.manifest.extra.storageBucket,
messagingSenderId: Constants.manifest.extra.messagingSenderId,
appId: Constants.manifest.extra.appId
};
initializeApp(firebaseConfig);
export const auth = getAuth();
export const database = getFirestore();
firebase config (^8.2.3)
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import Constants from 'expo-constants';
const firebaseConfig = {
apiKey: Constants.manifest.extra.apiKey,
authDomain: Constants.manifest.extra.authDomain,
projectId: Constants.manifest.extra.projectId,
storageBucket: Constants.manifest.extra.storageBucket,
messagingSenderId: Constants.manifest.extra.messagingSenderId,
appId: Constants.manifest.extra.appId
};
initializeApp(firebaseConfig);
export const auth = getAuth();
export const database = getFirestore();
You are welcome to have a look at it on snack.expo.dev/#andrase/helfen

Expo: Firebase was successfully found. However this package itself specifies a main module field that could not be resolved

I am having this error again and again.
I have tried installing firebase using both "expo install firebase" and "npm install firebase". But this didn't work. The project is expo managed project.
The code looks like this:
import { initializeApp } from "firebase/app";
const firebaseConfig = {
apiKey: "MY_API_KEY",
authDomain: "",
projectId: "",
storageBucket: "isf-insaaf.appspot.com",
messagingSenderId: "",
appId: ""
};
const app = initializeApp(firebaseConfig);
export default app;

Error importing firebase to React Native Expo

I want to authorize the FireBase application in React Native Expo, but I have an error.
I am using FireBase version 8.2.34 ( installed with the command "npm install firebase#8.2.3" ).
Code ( firebase.js ) :
// Import the functions you need from the SDKs you need
import * as firebase from "firebase";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = { ... };
// Initialize Firebase
let app;
if (firebase.apps.length === 0) {
app = firebase.initializeApp(firebaseConfig);
} else {
app = firebase.app()
}
ExpoGO App error ( in line №2 ):
Uncaught Error
Can't find variable: IDBIndex
...
<global>
...\firebase.js:2
...
UPD:
Also, I have a problem with importing FireStore.
Note:use compat while importing.
i suggest to have these in one seprate file. (use web configuration)
import firebase from 'firebase/compat/app';
const firebaseConfig = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
const app = firebase.initializeApp(firebaseConfig);
export const db = app.firestore();

Uncaught TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_0__.firestore is not a function in Vue js

I got this error in my firebase.js and I got Uncaught TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_0__.firestore is not a function in my console I tried to import firebase in different ways, but neither way solve my problem.
import * as firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
// firebase init - add your own config here
const firebaseConfig = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
};
firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
const auth = firebase.auth();
You are trying to get firestore from firebase. However in your code, firebase is corresponding to firebase/app.
Your initialization for const db must come from firebase/firestore.
Try this:
import { getFirestore } from "firebase/firestore"
const db = getFirestore();
Firebase doc: https://firebase.google.com/docs/firestore/quickstart#web-version-9_1
Moreover, you will probably get the same issue for firebase.auth():
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
const auth = getAuth();
Firebase doc: https://firebase.google.com/docs/auth/web/start

TypeError: firebase.initializeApp is not a function.(In 'firebase.initializeApp(firebaseConfig)','firebase.initializeApp' is undefined)

When I import firebase on react-native then faces some issues like this.
import * as firebase from "firebase";
var firebaseConfig = {
apiKey: "[data_private]",
authDomain: "[data_private]",
databaseURL: "https://[data_private].firebaseio.com",
projectId: "[data_private]",
storageBucket: "[data_private]",
messagingSenderId: "[data_private]",
appId: "[data_private]"
};
firebase.initializeApp(firebaseConfig);
According to the docs:
First you need to install firebase package:
npm install --save firebase
Then import it using firebase/app:
// Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
import * as firebase from "firebase/app";
You need to add the latest version of the firebase.
You can useyarn add #react-native-firebase/app or npm i #react-native-firebase/app.
And then import firebase from it.
For reference, you can use react-native-firebase
You are using firebase package which is for web. You must use native packages like react-native-firebase
For me, this solution is working
Step 1: Install firebase using npm:
npm install --save firebase
Step 2: Add this line of code in your react native code:
var firebase = require('firebase');
var firebaseConfig = {
apiKey: "[private_data]",
authDomain: "[private_data]",
projectId: "[private_data]",
storageBucket: "[private_data]",
messagingSenderId: "[private_data]",
appId: "[private_data]",
measurementId: "[private_data]"
};
const fireApp = firebase.initializeApp(firebaseConfig);
console.log(fireApp);

Resources