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 : Uncaught Error: Component analytics has not been registered yet

I'm working on getting firebase working for a webapp project for class. It has not been easy. I keep getting errors, and every change I make creates a different error. Firebase is initialized in the project. Here is my most recent error:
>provider.ts:239 Uncaught Error: Component analytics has not been registered yet
>>at Provider.initialize (provider.ts:239),
>>at initializeAnalytics (api.ts:108),
>>at firebase-config.js:23,
>>>initialize # provider.ts:239,
>>>initializeAnalytics # api.ts:108,
>>>(anonymous) # firebase-config.js:23
This error seems to be stemming from my firebase-config file, but I'm genuinely lost:
// Import the functions you need from the SDKs you need
//import * as firebase from 'firebase/app';
import { initializeApp } from '../node_modules/firebase/firebase-app.js';
import { initializeAnalytics , getAnalytics } from '../node_modules/firebase/firebase-analytics.js';
const firebaseConfig = {
[config keys]
};
// Initialize Firebase
const fb_app = initializeApp(firebaseConfig); // returns an app
initializeAnalytics(fb_app); // added to circumvent error, but it still appears.
const analytics = getAnalytics(fb_app);
console.log(analytics);
export {fb_app};
Any help would be appreciated. Thanks

If you are using v9 SDK, your import statements must be
import { initializeApp } from 'firebase/app';
import { initializeAnalytics , getAnalytics } from 'firebase/analytics';
Not the files directly.
There is a relevant discussion here: https://issueexplorer.com/issue/firebase/firebase-js-sdk/5597

I Also Faced Same issue in React-native-web With webpack project. It was Just Conflict Issue in Webpack CompileLibs Dependencies. If You have "firebase" in Your webpack.config.js file remove from there.

Uncaught Error: Cannot find module 'firebase' when trying to use serverTimestamp in firestore

when I try to add serverTimestamp() i get the error that firestore (web V9) is not imported. is there any way to use serverTimestamp or just import firestore/firebase so that I can use it?
addDoc(collection(db, 'rooms', roomId, 'messages'), {
message:input,
name:user.displayName,
timestamp:firebase.firestore.FieldValue.serverTimestamp()// the issue
})

There is no change in serverTimestamp, all you need is to import firebase&firestore correctly (version 9 compat)
import firestore from 'firebase/compat';
import firebase from 'firebase/compat/app';

You don't need the admin.firestore.FieldValue namespace to use serverTimestamp() in the new Modular SDK. You can simply import it as shown below:
import { addDoc, collection, serverTimestamp } from "firebase/firestore"
// import serverTimestamp ----->^
addDoc(collection(db, 'rooms', roomId, 'messages'), {
message: input,
name: user.displayName,
timestamp: serverTimestamp() // <-- usage
})
Importing compat version of Firestore just for serverTimestamp() while you are actually using Modular SDK kind of defeats purpose of having Modular SDK.
From the documentation,
When using both compat and Modular version, your app will compile, you won't get the app size benefits of the modular code until you fully remove the compat statements and code from your app.

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.

Importing js to Vue project

I'm looking at using Vuefire to make integrating Firestore with my Vue project easier. When reading the getting started documentation, they have you create a db.js file so that you can "conveniently" import it anywhere in your project.
import firebase from 'firebase/app'
import 'firebase/firestore'
// Get a Firestore instance
export const db = firebase
.initializeApp({ projectId: 'MY PROJECT ID' })
.firestore()
// Export types that exists in Firestore
// This is not always necessary, but it's used in other examples
const { Timestamp, GeoPoint } = firebase.firestore
export { Timestamp, GeoPoint }
// if using Firebase JS SDK < 5.8.0
db.settings({ timestampsInSnapshots: true })
On the next step in the Binding page they show you can import that module into a "RecentDocuments" component
// RecentDocuments.vue
import { db } from './db'
export default {
data() {
return {
documents: [],
}
},
firestore: {
documents: db.collection('documents'),
},
}
If I import that same db.js file into another component, won't it create another instance of the firebase firestore object, because it's basically calling .initializeApp again?
// SomeOtherComponent.vue
import { db } from './db'
export default {
...
Or am I not understanding how imports work?

No, it won't. Imports only happen once. The exports that come from each import are effectively singletons. You should be able to verify this by simply adding log messages to the import.