Develop Reference

Error while using db.collection() in react project

Error:
firebase_compat_app__WEBPACK_IMPORTED_MODULE_0__.default.storage is not a function
import React, { useEffect } from "react";
import styled from "styled-components";
import ImageSlider from "./ImageSlider";
import Movies from "./Movies";
import Viewers from "./Viewers";
import Footer from "./Footer";
import db from "../firebase";
const Home = () => {
useEffect(() => {
db.collection("movies").onSnapshot((snapshot) => {
console.log(snapshot);
});
}, []);
};
I don't understand why this error occurred.

The error message "firebase_compat_app__WEBPACK_IMPORTED_MODULE_0__.default.storage is not a function" suggests that the "storage" property is not a function on the default export of the "firebase_compat_app" module. This means that the code is trying to access the "storage" property as if it were a function, but it is not.
This error might occur if the import of 'firebase' library is not done properly in the code. Make sure that you have imported 'firebase' library correctly and also it is initialized with the correct configuration.
Also, the error might occur if you are trying to use the 'storage' module but it is not included in the import statement or not enabled in the firebase project.
It is also possible that you are trying to use the storage module in an unsupported way with the version of the firebase library that you have installed.

Firebase not importing properly into React

I have trouble importing Firebase into my React project. I got to the part where I want to display the data in the order I push it into the database. My way is using timestamps.
await addDoc(todosRef, {text: input, timestamp: firebase.database.ServerValue.TIMESTAMP});
For this to work I need to import firebase into my App.js, but this below is not working.
import firebase from 'firebase/app'
The app spits out this error message:
export 'default' (imported as 'firebase') was not found in
'firebase/app' (possible exports: FirebaseError, SDK_VERSION,
_DEFAULT_ENTRY_NAME, _addComponent, _addOrOverwriteComponent, _apps, _clearComponents, _components, _getProvider, _registerComponent, _removeServiceInstance, deleteApp, getApp, getApps, initializeApp, onLog, registerVersion, setLogLevel)

Optimized Way To Initialized Firebase in React Native

During building an app, I couldn't be able to initialized firebase V9 in optimized form in expo react native. I switch from V8 to V9 And counter different error, which aren't making sense to me.
Like module idb missing from file "...\node_modules\#firebase\app\dist\esm\... even I create a metro.config.js File.
And Firebase could not be found within the project when it is present in (Firebase V8).
And this error, idk what's that about at node_modules\react-native\Libraries\LogBox\LogBox.js:149:8 in register.
Error at node_modules\react-native\Libraries\LogBox\LogBox.js:60:8 in errorImpl.... , here's the issue or check this problem
And undefined is not an object (evaluating '_app.default.apps').
All such questions and their answers are available on stackoverflow. But none of them work for me. And Im not elaborating these issues, just giving you idea. So I try some things, and it worked.

In above question, I tell about some errors and after many searching I was able to fixed my problem.
First, I delete .expo , .expo-share , node_modules , package-lock.json , and yarn.lock (if you have). Then yarn install or npm install.
Second, change the firebase code to this for V9. As I see many people suggesting to downgrade to V8 when above mentioned errors occurs when they don't need to.
import { initializeApp, getApps, getApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
// import others as you need
const firebaseConfig = { ... };
let app;
if (getApps().length === 0) app = initializeApp(firebaseConfig);
else app = getApp();
const db = getFirestore(app);
const auth = getAuth();
export { auth, db };
For V8
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
// import others as you need
const firebaseConfig = { ... };
let app;
if (firebase.apps.length === 0) app = firebase.initializeApp(firebaseConfig);
else app = firebase.app();
const db = app.firestore();
const auth = firebase.auth();
export { auth, db };
I mentioned about creating a metro.config.js, as I read comments in this problem, some are confusing is there problem related to firebase or metro file. For me, I guess its firebase. If still you get this error, then downgrade your to firebase#9.6.11, see here
I give reference of 2 errors, and other 2 are easily available. It work for me, I hope this will help anyone of you.

How to connect in latest firebse version?

This is my firebase config.js file.
When I run the program it won't run with error msg : "import firebase from "/node_modules/.vite/firebase_app.js?v=46ca94a2";
It only worked when replaced firebase with older version (8.x.x)
but I got several vulnerabilities in my log.
Can anyone point out the problem , I want to use latest version if possible?
I checked the documentation but i found nothing is different from my code
https://firebase.google.com/docs/auth/web/start
import firebase from "firebase/app";
import 'firebase/firestore'
import "firebase/auth";
const firebaseConfig = {
....
}
firebase.initializeApp(firebaseConfig);
const projectFirestore = firebase.firestore()
const timestamp = firebase.firestore.FieldValue.serverTimestamp
const projectAuth = firebase.auth()
export {projectFirestore,timestamp,projectAuth}

There are several things that changed with Firebase 9, a reference guide is available here: https://firebase.google.com/docs/web/modular-upgrade
I cannot list all the changes here because there is quite a few and it depends on what/how you're already using it right now and which one you want to use later on (compat or modular).
But mainly, you will need to write the imports like this now
import { initializeApp } from "firebase/app"
The whole changelogs are available here.

Server Error TypeError: Cannot read properties of undefined (reading 'apps')

this is my firebase sdk version
firebase#9.0.2
this is init code of firebase i cant solve this please help me for this error
export default function initFirebase() {
if(!firebase.apps.length){
firebase.initializeApp(clientCredentials)
if(typeof window !=='undefined'){
if('measurementId' in clientCredentials){
firebase.analytics()
firebase.performance()
}
}
console.log('firebase was successfully init')
}
}
How i import firebase
import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/storage'
import 'firebase/analytics'
import 'firebase/performance'

You are using the new Modular SDK (V9.0.0+) which is designed to facilitate tree-shaking (removal of unused code) to make your web app as small and fast as possible. If you want to use your existing code (V8 name-spaced syntax) then you would have to change your imports to compat versions as shown below:
import firebase from 'firebase/compat/app'
import 'firebase/compat/firestore'
// import 'firebase/compat/[SERVICE_NAME]'
However, I would recommend upgrading to the new SDK. The modular/functional syntax looks like this:
import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
import { getFirestore } from 'firebase/firestore'
const app = initializeApp({ ...firebaseConfig })
const auth = getAuth(app)
const firestore = getFirestore(app)
// other Firebase services
You don't have to check if a default Firebase app instance already exists in the modular syntax. However, if you need to list Firebase instances, you can do so using getApps():
import { getApps } from 'firebase/app'
console.log(getApps())

Below is what worked for me, the issue started after I upgraded to Firebase 9
import firebase from 'firebase/compat/app';
import * as firebaseui from 'firebaseui'
import 'firebaseui/dist/firebaseui.css'
My firebase initialization looks like below:
let ui = firebaseui.auth.AuthUI.getInstance()
if (!ui) {
ui = new firebaseui.auth.AuthUI(firebase.auth())
}
ui.start('#firebaseui-auth-container', {
signInFlow: isDesktop() ? 'popup' : 'redirect',
callbacks: {
signInSuccessWithAuthResult() {
window.location.assign(`/home`)
// firebase.auth().signOut()
return false
},
},
...

You can't use the Firebase Auth UI library with the modular SDK yet. Check this for more details.