Develop Reference

TypeError: undefined is not an object (evaluating '_app.default.firestore')

`Hi all, i just started learning react native and while working on this project with firebase firestore, i encountered this issue. I am trying to push some data into the database. I am using Firebase version ^9.14.0
firebase.js
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: "",
};
// const app = initializeApp(firebaseConfig);
// export const auth = getAuth(app);
let app;
if (firebase.apps.length === 0) {
app = firebase.initializeApp(firebaseConfig);
} else {
app = firebase.app();
}
const db = app.firestore();
const auth = firebase.auth();
export { db, auth };
Cart.js
import React, { useState } from "react";
import { StyleSheet } from "react-native";
import { View, Text, TouchableOpacity, Modal } from "react-native";
import { useSelector } from "react-redux";
import OrderCheckoutList from "./OrderCheckoutList";
import firebase from "firebase/app";
const addOrderToFirebase = () => {
const db = firebase.firestore();
db.collection("orders").add({
items: items,
createdAt: firebase.firestore.FieldValue.serverTimestamp(),
});
//setModalVisible(false);
};
I am not sure if this is related to the firebase v9 or v8, or is it something that i am missing in the source code.`

firebase__WEBPACK_IMPORTED_MODULE_1__.default.app.ref is not a function

i'm trying to refencer a realtime database at my reactjs aplication but it's not working.I created a file for firebase config named firebase.js and i import that one in ./home/index.js
Visual Studio code does not report the error, but when i look the DevTool report 3 errors.
1.Uncaught TypeError: firebase__WEBPACK_IMPORTED_MODULE_1_.default.app.ref is not a function
2.The above error occurred in the component
3.Uncaught (in promise) TypeError: firebase__WEBPACK_IMPORTED_MODULE_1_.default.app.ref is not a function
1.firebase.js
import {initializeApp}from 'firebase/app';
import { getAuth} from 'firebase/auth';
import { getDatabase} from 'firebase/database';
const firebaseAPP =initializeApp( {
apiKey: "AIzaSyCtYdRuFmkC3Mx7dcRLBcY-HYPitRuMD2Y",
authDomain: "reactproject-2d567.firebaseapp.com",
databaseURL:"https://reactproject-2d567-default-rtdb.firebaseio.com/",
projectId: "reactproject-2d567",
storageBucket: "reactproject-2d567.appspot.com",
messagingSenderId: "199332161332",
appId: "1:199332161332:web:828be709a4d0109df62761",
measurementId: "G-F517JH6WEJ"
});
const auth = getAuth(firebaseAPP)
const db = getDatabase(firebaseAPP)
class Firebase{
constructor(){
this.app = getDatabase(firebaseAPP);
}
//metodo de login
login(email,password){
return auth.signInWithEmailAndPassword(email,password)
}
async register(nome,email,password){
await auth.createUserWithEmailAndPassword(email,password)
const uid= auth.currentUser.uid
return db.ref('usuario').child(uid).set({nome:nome})
}
isInitialized(){
return new Promise(resolve =>{
auth.onAuthStateChanged(resolve)
})
}
}
export default new Firebase();
2../home/index.js
import React, { Component } from 'react';
import firebase from '../../firebase';
import './home.css'
class Home extends Component {
state ={
posts:[]
}
componentDidMount(){
firebase.app.ref('posts').once('value', (snapshot)=>{
let state = this.state;
state.posts =[]
snapshot.forEach((childItem)=>{
state.posts.push({
key:childItem.key,
titulo:childItem.val().titulo,
image:childItem.val().image,
descricao:childItem.val().descricao,
autor:childItem.val().autor,
})
})
this.setState({state})
})
}
render(){
return(
<div> home</div>
)
}
}
export default Home

Firebase sign in with google for web not redirecting

I was working on a react project in which I wanted to implement google sign in so I used firebase and wrote the following code:
import {initializeApp} from "firebase/app";
import "firebase/auth";
import { getAuth } from "firebase/auth";
const firebaseConfig = {
apiKey: "****",
authDomain: "***",
projectId: "***",
storageBucket: "***",
messagingSenderId: "***",
appId: "***",
measurementId: "***"
};
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export default app;
Creating Context to make the function accessible in the whole application:
import React from 'react';
import FirebaseContext from './FirebaseContext';
import { auth } from '../Firebase/firebase';
import { signInWithRedirect,GoogleAuthProvider,createUserWithEmailAndPassword } from "firebase/auth";
const FirebaseState = (props)=>{
const reactSignup = (email,password)=>{
return createUserWithEmailAndPassword(auth,email,password);
}
const googleSignin = ()=>{
const provider = new GoogleAuthProvider();
return signInWithRedirect(auth,provider);
}
return(
<FirebaseContext.Provider value={{reactSignup,googleSignin}}>{props.children}</FirebaseContext.Provider>
)
}
export default FirebaseState;
Calling the function on the desired button click
const {googleSignin} = useContext(FirebaseContext);
const handleGoogleSignin = async()=>{
try{
console.log("Sign in attempted");
await googleSignin();
history.push("/main");
}catch(err){
console.log(err);
}
}
Now the problem is that whenever I am running application using npm run start and the button is clicked it does not redirect for sign in but when the application is stopped then it is able to redirect but as my application is no more running that is of no use.
30 sec screen recording of the problem

Do you try to change signInWithRedirect to signInWithPopup ?
So
import React from 'react';
import FirebaseContext from './FirebaseContext';
import { auth } from '../Firebase/firebase';
import { signInWithPopup,GoogleAuthProvider,createUserWithEmailAndPassword } from "firebase/auth";
const FirebaseState = (props)=>{
const reactSignup = (email,password)=>{
return createUserWithEmailAndPassword(auth,email,password);
}
const googleSignin = ()=>{
const provider = new GoogleAuthProvider();
return signInWithPopup(auth,provider);
}
return(
<FirebaseContext.Provider value={{reactSignup,googleSignin}}>{props.children}</FirebaseContext.Provider>
)
}
export default FirebaseState;
Alternative Idea
Detact signInWithRedirect from Context and use the funct directly in your component function like this:
import { auth, provider } from '../../config';
import { signInWithPopup } from '#firebase/auth';
import { Button } from '#chakra-ui/button';
export default function Signup() {
const loginWithGoogle = () => {
signInWithPopup(auth, provider);
};
return (
<div>
<Button onClick={loginWithGoogle}>Signin With Google</Button>
</div>
);
}
Alternative Idea 2
Go to Firebase Panel > Authentication > Sign-in Method
Check your domain, if your domain is in the list delete and add again. Else add your domain.

next.js firebase error .a.storage is not a function

using next.js.
I want to use firebase's cloudStorage to retrieve images.
I've imported firebase into next.js, but I'm getting an error.
The version of firebase is 8.2.7.
var storage = firebase.storage(); in place of
I get a TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_2___default.a.storage is not a function error.
import 'firebase/analytics';
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import React, { FunctionComponent } from 'react';
const Gallery: FunctionComponent = () => {
var firebaseConfig = {
apiKey: '***************',
authDomain: '*************',
projectId: '*************',
storageBucket: '*************',
messagingSenderId: '*************',
appId: '*************',
measurementId: '*************',
};
// Initialize Firebase
if (firebase.apps.length === 0) {
firebase.initializeApp(firebaseConfig);
firebase.analytics();
}
var storage = firebase.storage();
var storageRef = storage.ref();
var listRef = storageRef.child('files/uid');
listRef
.listAll()
.then(function (res) {
res.prefixes.forEach(function (folderRef) {
});
res.items.forEach(function (itemRef) {
});
})
.catch(function (error) {});
return (
<div>
<div>aaaa</div>
</div>
);
};
export default Gallery;

It seems that you don't import the Cloud Storage SDK. Do as follows:
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/storage'; // <-- See the addition here
More info in the doc.

How to get data from firebase cloud firestore in react

I am able to post data in firebase cloud firestore, but I am facing problem in getting data from that.
Below are my code
firebase.js
import firebase from "firebase";
var firebaseApp = firebase.initializeApp({
apiKey: "XXXXXXXXXXXXXXXXX",
authDomain: "XXXXXXXXXXXXXXXXX",
databaseURL: "XXXXXXXXXXXXXXXXX",
projectId: "XXXXXXXXXXXXXXXXX",
storageBucket: "XXXXXXXXXXXXXXXXX",
messagingSenderId: "XXXXXXXXXXXXXXXXX",
appId: "XXXXXXXXXXXXXXXXX"
})
var db = firebaseApp.firestore();
export { db };
Below code is to get data from firebase cloud firestore:
FormStatus.js:
import React, { Component } from "react";
import { db } from "../firebase";
class FormStatus extends Component {
constructor(props) {
super(props);
this.state = { form: [], }
}
componentDidMount() {
db.database().ref("form").on("value", snapshot => {
let form = [];
snapshot.forEach(snap => {
form.push(snap.val());
})
this.setState({ form: form })
});
}
render() {
return (
<div>
{this.state.form.map(data => {
return (
<ul>
<li>{data.name}</li>
<li>{data.location}</li>
</ul>
)
})}
</div>
)
}
}
export default FormStatus;
I am getting the following error:
TypeError: _firebase__WEBPACK_IMPORTED_MODULE_2__.db.database is not a function

Your code is effectively trying to execute this:
firebase.firestore().database()
That's not valid. If you want the Firebase Database reference, you should simple execute:
firebase.database()
This means you probably don't want to export firebase.firestore() from your firebase.js file. Firestore is a different database with a different API.
You could export this:
export { firebaseApp };
Then import later like this:
import { firebaseApp } from "./firebase"
firebaseApp.database().ref(...)

Change db.database().ref("form") to db.collection("form")