React Native import firebase 'auth' and 'firestore' - javascript

I'm getting errors when I try to simply load the auth and firestore from firebase.
Error message:
TypeError: (0, _app.initializeApp) is not a function. (In '(0, _app.initializeApp)(firebaseConfig)', '(0, _app.initializeApp)' is undefined)
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
const firebaseConfig = {
apiKey: "KEY",
authDomain: "app.firebaseapp.com",
projectId: "app",
storageBucket: "app.appspot.com",
messagingSenderId: "1293821378",
appId: "5647"
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = app.auth();
export { db, auth }
Also when I try to import the auth from another file I try this:
import { auth } from '../firebase';

If you are using Firebase version <9.0.0 which only supports name-spaced SDK, then use the older imports only and not the modular syntax. Try refactoring the code as shown below:
import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth"
const firebaseConfig = {};
const app = firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
const auth = firebase.auth();
export { db, auth }
Also makes sure you are referring to Web (name-spaced) tab in the documentation.

Related

ERROR in Module not found: Error: Package path . is not exported from package

Firebase.js:
import firebase from "firebase";
const firebaseConfig = {
apiKey: <<API_KEY>>,
authDomain: "fir-42683.firebaseapp.com",
projectId: "fir-42683",
storageBucket: "fir-42683.appspot.com",
messagingSenderId: "950284829228",
appId: "1:950284829228:web:f9e6862d17650cfca38789",
measurementId: "G-VWT1P7ES8S"
};
export const db = firebase.initializeApp(firebaseConfig)
App.js
import {db } from './Firebase'
I wrote just a simple code for read data from firebase. but now, iam stuck on this error, what will i do.
ERROR in ./src/Firebase.js 3:0-32 Module not found: Error: Package path . is not exported from package D:\BROCAMP\Week 15\olx\node_modules\firebase (see exports field in D:\BROCAMP\Week 15\olx\node_modules\firebase\package.json)
The problem is const db = firebase.initializeApp(firebaseConfig)
You missed one step, this is actually const app = firebase.initializeApp(firebaseConfig)
Consider this hook which can get your db:
useGetFirestore.ts
import { getApp } from 'firebase/app';
import { getFirestore, Firestore } from 'firebase/firestore';
const useGetFirestore = (): Firestore => {
const app = getApp();
return getFirestore(app);
};
export default useGetFirestore;
The code you are calling db is actually app and that code just needs to run at the top of your app before anything:
const app = initializeApp(firebaseConfig);
Sometimes you only need this:
initializeApp(firebaseConfig);

Firebase authentication on React Native auth.tenandId error

I'm trying a email-password authentication with Firebase. I initiated a web app on Firebase followed the Get Started section of web. But I'm getting this error from catch():
[TypeError: undefined is not an object (evaluating 'auth.tenantId')]
My Firebase config:
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore"
const firebaseConfig = {
apiKey: "",
authDomain: "spotifymockrn.firebaseapp.com",
projectId: "spotifymockrn",
storageBucket: "spotifymockrn.appspot.com",
messagingSenderId: "",
appId: "",
measurementId: "",
};
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);
My SignUp Screen where I call handleFirebase function when SignUp is pressed.Normally use is also saved with AsyncStorage but for simplicity I'm trying like this now:
import { createUserWithEmailAndPassword } from 'firebase/auth';
import auth from '../../../../firebase/firebase'
.
.
const handleFirebase = () => {
createUserWithEmailAndPassword(auth, email, password).then(response => { console.log(response.user); })
.catch((error) => (console.error(error)));
}
I'm getting email, and password from redux store, but I also tried directly writing strings there and got the same error and couldn't find anything online. I tried writing real emails as well as random strings nothing changes. Thank you for reading.
import auth from '../../../../firebase/firebase'
This import would be an object { auth, db } but you need to pass the Firebase Auth instance in createUserWithEmailAndPassword(). Try changing your import as shown below:
// the { }
import { auth, db } from '../../../../firebase/firebase'
Now auth will be the Auth instance.

Firebase Module not found: Can't resolve '../firebase' in '/vercel/path0/components' during deployment

I was trying to deploy my application that uses firebase on Vercel. But it gives `Module not found: Can't resolve '../firebase' in '/vercel/path0/components', in development this works.
My firebase.js
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_API_KEY,
authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_PROJECTID,
storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
appId: process.env.NEXT_PUBLIC_APP_ID,
measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID,
};
const app = !firebase.apps.length
? firebase.initializeApp(firebaseConfig)
: firebase.app();
const db = app.firestore();
const auth = app.auth();
const provider = new firebase.auth.GoogleAuthProvider();
export { auth, db, provider };
I am import auth, db and provider where ever I want to use them.
Here is one of the file where this error occurs.
import { auth } from "../firebase";
const Sidebar = () => {
const [user] = useAuthState(auth);
I guess the error is at import { auth } from "../firebase"; part.
Is there any way to fix this? Help would be appreciated.

TypeError: undefined is not an object(evaluating '_$$_REQUIRE(_dependencyMap[9], "../../config/FIREBASE").FIREBASE.database')

I have installed Firebase with npm in Firebase, but I don't know what happens with this error.
File FIREBASE.js
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// 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 = {
apiKey: "AIzaSyAd2EBoYYCRWEc3oClZTV3Wo-TiQkM2MgQ",
authDomain: "crud-react-26836.firebaseapp.com",
databaseURL: "https://crud-react-26836-default-rtdb.asia-southeast1.firebasedatabase.app",
projectId: "crud-react-26836",
storageBucket: "crud-react-26836.appspot.com",
messagingSenderId: "741718079918",
appId: "1:741718079918:web:1566301b46c4448c8c703f"
};
// Initialize Firebase
const FIREBASE = initializeApp(firebaseConfig);
export default FIREBASE;
TambahKontak.js
import React, { Component } from 'react'
import { StyleSheet, View, TouchableOpacity, Text, Alert } from 'react-native'
import { InputData } from '../../component'
import { FIREBASE } from '../../config/FIREBASE'
onSubmit = () => {
if (this.state.nama && this.state.nomorHP && this.state.alamat) {
console.log("Masuk Submit");
console.log(this.state);
const kontakReferensi = FIREBASE.database().ref('kontak');
You aren't using the new Modular/Functional syntax which is included from version 9.0.0+. You would have to rewrite your code to follow the new syntax:
import { getDatabase } from "firebase/database"
const dbRef = ref(getDatabase());
const snapshot = await get(child(dbRef, 'kontak'))
If you want to use the existing code (with older syntax) then use compat version by changing the imports to:
import firebase from 'firebase/compat/app'
import 'firebase/compat/database'
import 'firebase/compat/[SERVICE_NAME]'
const FIREBASE = firebase.initializeApp(firebaseConfig);
export default FIREBASE;
I'd recommend using the new version and following the documentation for learning more about it.

In Firebase I am getting an Uncaught TypeError: Cannot read property 'initializeApp' of undefined, but not sure why 'firebase' is not defined?

here's my firebase import etc. in the config file, why would this be unable to recognise firebase?
import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'
const firebaseConfig = {
apiKey: "XXX",
authDomain: "XXX",
projectId: "XXX",
storageBucket: "XXX",
messagingSenderId: "XXX",
appId: "XXX",
measurementId: "XXX"
}
//init firebase
firebase.initializeApp(firebaseConfig)
const projectAuth = firebase.auth()
const projectFirestore = firebase.firestore()
const timestamp = firebase.firestore.FieldValue.serverTimestamp
export { projectAuth, projectFirestore, timestamp }
If you have installed version 9.0.0 then you would have to use compat libraries to use the namespaced version:
import firebase from 'firebase/compat/app'
import 'firebase/compat/firestore'
import 'firebase/compat/auth'
Although I'd recommend using the new Modular syntax which is designed to facilitate tree-shaking (removal of unused code) to make your web app as small and fast as possible.
import { initializeApp } from "firebase/app"
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore"
const app = initializeApp(firebaseConfig)
const projectAuth = getAuth(app)
const projectFirestore = getFirestore(app)
export { projectAuth, projectFirestore }
You can find detailed information in the documentation

Categories