We Keep Coding

when I try to get a data from the firebase I get error in the console

I have a 'products' collection in the firebase ,in my project I have a Products page that contain a list of all the products name each name is a link for edit product page ,in the edit product page I want to took the id from the URL Through use params, and get all the data about this product but I have error in the console that said :
Uncaught (in promise) Type Error: firebase__WEBPACK_IMPORTED_MODULE_1_.default. Collection is not a function
at fetch Data
this is my code in the firebase page:
import { initializeApp } from "firebase/app";
import {getFirestore} from "firebase/firestore"
const firebaseConfig = {
apiKey: "xxxxxx",
authDomain: "xxxxxx.firebaseapp.com",
projectId: "xxxxxx",
storageBucket: "xxxx.appspot.com",
messagingSenderId: "xxx",
appId: "xxxxxx",
measurementId: "xxxxxx"
};
const app = initializeApp(firebaseConfig);
const dB = getFirestore(app)
export default db
and that the code in the editproduct page :
import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import dB from '../firebase';
const EditProduct = () => {
const { id } = useParams();
const [product, setProduct] = useState({});
useEffect(() => {
const fetchData = async () => {
const snapshot = await dB.collection('Products').doc(id).get();
setProduct(snapshot.data)
}
fetchData();
}, [id])
}

Why firebase give this error when I use onSnapshot?

Error itself : Uncaught FirebaseError: Expected type 'pa', but it was: a custom $n object
firebase file :
import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
import { getFirestore } from 'firebase/firestore/lite'
const firebaseConfig = {
apiKey: 'API_KEY',
authDomain: 'AUTH_DOMAIN',
projectId: 'PROJECT_ID',
storageBucket: 'STORAGE_BUCKET',
messagingSenderId: 'MESSAGING_SENDER_ID',
appId: 'APP_ID',
}
const firebaseApp = initializeApp(firebaseConfig)
const db = getFirestore(firebaseApp)
const auth = getAuth(firebaseApp)
export { db, auth }
Request itself :
useEffect(() => {
//getPosts()
const unsubscribe = onSnapshot(collection(db, 'cities'), (snapshot) => {
const postsList = snapshot.docs.map((doc) => ({
id: doc.id,
data: doc.data(),
}))
setPosts(postsList)
})
return () => {
unsubscribe()
}
}, [])
I tried to change some imports like other recommend but just got another error

Firestore Lite SDK does not support listeners. Try importing getFirestore() from the standard SDK.
import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
import { getFirestore } from 'firebase/firestore' // <-- remove /lite
const firebaseConfig = {...}
const firebaseApp = initializeApp(firebaseConfig)
const db = getFirestore(firebaseApp)
const auth = getAuth(firebaseApp)
export { db, auth }
import { db } from './path/to/firebase';
import { collection, onSnapshot } from 'firebase/firestore';
useEffect(() => {
const unsubscribe = onSnapshot(collection(db, 'cities'), (snapshot) => {
const postsList = snapshot.docs.map((doc) => ({
id: doc.id,
data: doc.data(),
}))
setPosts(postsList)
})
}, [])

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.

React Native import firebase 'auth' and 'firestore'

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.

NextJS Firebase Auth undefined GoogleAuthProvider

I am having issues implementing firebase authentication with Google Provider in NextJS. I set up the environment variables and am successfully connecting to firebase. I am receiving the following error and cant seem to figure out a solution, TypeError: Cannot read properties of undefined (reading 'GoogleAuthProvider'). Below is my code.
//firebaseApp.js
import { initializeApp, getApps } from "firebase/app"
import { getFirestore } from "firebase/firestore"
import { getAuth } from "firebase/auth"
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};
if (getApps().length === 0) {
console.log('Error Connecting to Firebase')
}
const app = initializeApp(firebaseConfig)
const db = getFirestore(app)
const auth = getAuth(app)
export { db, auth }
//firebaseAuthUI.config.js
export const uiConfig = (firebase) => {
return {
signInFlow: "popup",
signInSuccessUrl: "/",
signInOptions: [firebase.auth.GoogleAuthProvider.PROVIDER_ID],
};
};
//login.js
import Head from 'next/head';
import { useRouter } from 'next/router';
import { useAuthState } from 'react-firebase-hooks/auth';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import { auth, firebase } from '../app/firebaseApp';
import { uiConfig } from '../config/firebaseAuthUI.config';
export default function Login() {
const [user, loading, error] = useAuthState(auth);
const router = useRouter();
if (loading) return 'loading'
else if (error) return error
else if (user) {
router.push('/');
}
const authConfig = uiConfig(auth);
return (
<>
<Head>
<title>Login</title>
</Head>
<StyledFirebaseAuth uiConfig={authConfig} firebaseAuth={auth} />
</>
)
}

I think the example code you copy from uses module 8
try to import GoogleAuthProvider like this, check firebase ref
import { GoogleAuthProvider} from "firebase/auth"
...
...
export const uiConfig = (firebase) => {
return {
signInFlow: "popup",
signInSuccessUrl: "/",
signInOptions: [GoogleAuthProvider.PROVIDER_ID],
};
};