I have an expo project with this firebase config file:
import { initializeApp, getApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import geofire from 'geofire';
const firebaseConfig = {
...
};
const app = initializeApp(firebaseConfig);
let firestore = getFirestore(app);
const geofireRef = new geofire(app.database().ref())
export default firestore;
And I'm getting this message when I try to run it:
app.database is not a function. (In 'app.database()', 'app.database' is undefined)
I installed it by running "yarn add geofire"
Related
I get this error: TypeError: (0, _firebase.auth) is not a function. (In '(0, _firebase.auth)()', '(0, _firebase.auth)' is an instance of AuthImpl)
My code is:
`
// Import the functions you need from the SDKs you need
import firebase from 'firebase/compat/app';
import { getAuth } from "firebase/auth";
import AsyncStorage from '#react-native-async-storage/async-storage';
import { initializeAuth, getReactNativePersistence} from 'firebase/auth/react-native';
const firebaseConfig = {
};
// Initialize Firebase
const app = firebase.initializeApp(firebaseConfig);
const auth = initializeAuth(app, {
persistence: getReactNativePersistence(AsyncStorage)
});
export { auth };
`
I tried many variations of imports and different ways for the const auth.
I am getting this error when I call the onSnapshot listener to listen for changes in the database. I get firebase.default.firestore is not a function.
db.firestore().collection('users').doc(user.id).collection('notifications'), async (snapshot)
db is imported from the file where code is
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
const firebaseConfig = {
// left empty for the sake of this question
};
const app = initializeApp(firebaseConfig);
export default getFirestore();
I'm practicing making some projects which are using ReactJS, but when I saved the config file as below, It showed the error as the title. Has anyone ever been trouble with this? Please help me!
Thanks!
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import firebase from 'firebase/compat/app';
import 'firebase/analytics';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
// 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
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyD0rxJTIV4RIKfdFJB6G--9md2-SAEDwjs",
authDomain: "chat-app-d3f09.firebaseapp.com",
projectId: "chat-app-d3f09",
storageBucket: "chat-app-d3f09.appspot.com",
messagingSenderId: "361125159681",
appId: "1:361125159681:web:9557ff40c4e38e30ba3100",
measurementId: "G-X1Q63CL2N2"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const auth = firebase.auth();
const db = firebase.firestore();
export { db, auth }
export default firebase
You are using firebase version 9 with 8 & >.
Try:
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
//const auth = firebase.auth();
const auth = getAuth(app)
//const db = firebase.firestore();
const db = getFirestore(app)
Or if you want to use version 8 & > then:
const app = firebase.initializeApp(firebaseConfig);
//const analytics = getAnalytics(app);
const auth = firebase.auth();
const db = firebase.firestore();
Note that firebase version 9+ is written in functional way.
I'm trying to setup stripe on my new Firebase app (React). I'm using the new version of Firebase (9) and the new Stripe integration, published 12 days ago:
https://www.npmjs.com/package/#stripe/firestore-stripe-payments
What I'm trying to do here is to load the stripe-hosted checkout for a subscription.
This is the code:
import React, { useEffect } from 'react'
import { createCheckoutSession } from "#stripe/firestore-stripe-payments";
import { payments } from './Firebase'
export default function Stripetest(props) {
async function checkout(e) {
e.preventDefault();
try {
const session = await createCheckoutSession(payments, {
price: "price_1JwyWZIweuKs6S3NBDjBqiiw",
});
window.location.assign(session.url);
} catch (e) {
console.log(e);
}
}
return (
<>
<button onClick={checkout}>Checkout</button>
</>
)
}
This is the Firebase.js that exports "payments":
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getFirestore, collection, getDocs } from 'firebase/firestore';
import { getAuth } from 'firebase/auth';
import { getStripePayments } from "#stripe/firestore-stripe-payments";
import { getApp } 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
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseApp = initializeApp({
apiKey: "AIzaSxxxxxxxxxx",
authDomain: "bxxxxxxxxxx6.firebaseapp.com",
projectId: "bxxxxxxxx6",
storageBucket: "xxxxxxxx.appspot.com",
messagingSenderId: "xxxxxxxxxxxxx",
appId: "1:xxxxxxx",
measurementId: "G-Kxxxxx"
});
export const db = getFirestore(firebaseApp)
export const auth = getAuth(firebaseApp)
export default firebaseApp;
const app = getApp();
export const payments = getStripePayments(app, {
productsCollection: "products",
customersCollection: "customers"
});
I've tried both "app" and "firebaseApp" in "getStripePayments(APP, {" but when I click the checkout button it's always the same error:
FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore
I downgraded from:
"#stripe/firestore-stripe-payments": "0.0.4",
to
"#stripe/firestore-stripe-payments": "0.0.3",
in package.json and the bug stopped occurring and all works fine now
i want to implement firebase to my next.js file but it keep getting popup module not found
apply firebase in this file
import Image from 'next/image';
import { useSession } from 'next-auth/client';
import { EmojiHappyIcon } from "#heroicons/react/outline";
import { CameraIcon,VideoCameraIcon } from "#heroicons/react/solid";
import{ useRef } from "react";
import { db } from "../../firebase";
import firebase from "../../firebase";
function InputBox() {
const [session]=useSession();
const inputRef=useRef(null);
const sendPost = (e) => {
e.preventDefault();
if(!inputRef.current.value) return;
db.collection('posts').add({
message: inputRef.current.value,
name: session.user.name,
email: session.user.email,
image: session.user.image,
timestamp: firebase.firestore.FieldValue.serverTimestamp()
})
inputRef.current.value="";
};
firebase file
import firebase from "./firebase";
import "firebase/storage";
my const firebaseConfig is correct already
const app = !firebase.apps.length ? firebase.initializeApp(firebaseConfig) : firebase.app() ;
const db = app.firestore();
const storage= firebase.storage();
export { db, storage };
code is for firebase v8 and you have firebase v9 package
downgrade version :
npm rm firebase //remove current
npm install firebase#8.9 //install firebase8