im looking to retrieve data from the firestore.first it worked well when i ejected from expo i cant able to retrieve data from the servers. when i read some documentation they suggested to use
let myApp = initializeApp(firebaseConfig);
myApp.firestore().settings({ experimentsalForceLongPolling: true });
const firestore = getFirestore(myApp);
but im ettin error myApp.firestore() is not a function.
here is my code:
import { initializeApp } from "firebase/app";
const firebaseConfig = {
};
let myApp = initializeApp(firebaseConfig);
myApp.firestore().settings({ experimentsalForceLongPolling: true });
const firestore = getFirestore(myApp);
im thinking there is a problem in import can someone help me please
The settings to enable experimentalAutoDetectLongPolling should be enabled through initializeFirestore there you will find settings: FirestoreSettings argument refer FirestoreSettings which you can set as follows :
import { initializeApp } from "firebase/app";
import { initializeFirestore, getFirestore } from "firebase/firestore";
const firebaseConfig = {
};
let app = initializeApp(firebaseConfig);
let db;
try {
db = initializeFirestore(app, { experimentalAutoDetectLongPolling: true }); // <= settings
} catch (e) {
if (e.code === 'failed-precondition') {
// Multiple app instances detected
db = getFirestore(app);
} else {
throw e;
}
}
And as initializeFirestore is equivalent to getFirestore method so no need to reinitialize firestore again as shown in docs:
Initializes a new instance of Firestore with the provided settings. Can only be called before any other function, including (getFirestore:1). If the custom settings are empty, this function is equivalent to calling (getFirestore:1).
I have read multiple posts on how to setup Firebase with Vue & Quasar and am trying to understand the role of the boot file.
Boot file
import { initializeApp } from 'firebase/app'
import { getAuth, onAuthStateChanged } from 'firebase/auth'
const firebaseConfig = {
** my config here **
}
// init firebase
const app = initializeApp(firebaseConfig)
const db = getFirestore(app)
const auth = getAuth(app)
console.log('FB App: ', app)
// functions
onAuthStateChanged((user) => {
console.log('User state changed')
})
export { db, auth }
When I use firebase in a component do I need to use the following?
import { db, auth } from '#/boot/firebase.js'
I have a react/nextjs app and I have firebase.js as follow:
import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/analytics'
import 'firebase/firestore'
const firebaseConfig = {
apiKey: '...'
}
try {
firebase.initializeApp(firebaseConfig)
firebase.analytics()
} catch (err) {
if (!/already exists/.test(err.message)) {
console.error('Firebase initialization error', err.stack)
}
}
export default firebase
I kept getting
Firebase initialization error ReferenceError: navigator is not defined
after adding analytics to the firebase.js file. What is the correct way to add analytics to the app?
import { getAnalytics, isSupported } from "firebase/analytics";
const analytics = isSupported().then(yes => yes ? getAnalytics(app) : null);
Try this one
import firebase from "firebase/app"
import "firebase/auth"
import "firebase/firestore"
import "firebase/storage"
import "firebase/analytics"
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_API_KEY,
authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
appId: process.env.NEXT_PUBLIC_APP_ID,
storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID,
}
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig)
}
// Auth export
export const auth = firebase.auth()
// Firestore exports
export const firestore = firebase.firestore()
export const serverTimestamp = firebase.firestore.FieldValue.serverTimestamp
export const fbTimestamp = firebase.firestore.Timestamp
export const fromMillis = firebase.firestore.Timestamp.fromMillis
export const increment = firebase.firestore.FieldValue.increment
// Storage exports
export const storage = firebase.storage()
export const analytics = () => {
if (typeof window !== "undefined") {
return firebase.analytics()
} else {
return null
}
}
export default firebase
ReferenceError: navigator is not defined
because there is no window object present during the server-side rendering of the Nextjs application.
Try:
if(typeof window != undefined){
firebase.analytics()
}
I just updated my firebase to version 9 and this error is not seen.
Update to version 9 could be a solution to this.
But for version 9, there are some changes in firebase declaration.
import firebase from 'firebase/compat/app'
import 'firebase/compat/auth'
import 'firebase/compat/firestore'
Using firebase V 9.16 this how I solved the issue
import { initializeApp } from "firebase/app";
import { getAnalytics, isSupported } from "firebase/analytics";
import { getFirestore } from "firebase/firestore"
const firebaseConfig = {
...
};
let app; let analytics; let db
if(typeof window != undefined){
app = initializeApp(firebaseConfig);
analytics = isSupported().then(yes => yes ? getAnalytics(app) : null);
db = getFirestore(app)
}
export {app, analytics, db}
In _app.js I import analytics and i use useEffect like
useEffect(() => {
analytics;
}, [])
I'm trying to set up Firebase authentication for a Next.js app. I'm using Firebase 9.6.4. I can't figure out the modular importing in v9, and I'm getting this error when accessing the route /api/login.
ReferenceError: Cannot access 'auth' before initialization
Here is the relevant code:
lib/firebase.js
import firebase from "firebase/app";
import { getAuth } from "firebase/auth";
const firebaseConfig = { ... };
const app = firebase.initializeApp(firebaseConfig, "App Name");
export const provider = new firebase.auth.GoogleAuthProvider();
export const auth = getAuth(app);
export default firebase;
pages/api/login.js
import firebase, { auth, provider } from "../../lib/firebase";
export default function signIn(req, res) {
auth
.signInWithPopup(provider)
.then(...)
.catch(...);
}
...
I made a service in my React Native Expo Snack app that handles the instantiation of different firebase services. Somehow, Snack isn't able to find firestore, as it says "_firebase.default.firestore is not a function". The code used is shows below:
import firebase, { firestore } from 'firebase';
const config = { ... // Deleted, assume the config is correct }
export const FirebaseApp = !firebase.apps.length ? firebase.initializeApp(config) : firebase.app();
export const Firestore = firebase.firestore();
export const Auth = firebase.auth();
Can somebody confirm this should work in Snack? Why doesn't it recognize firestore() as a function?