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"
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();
Im building a web chat app with next.js and im trying to implement push notifications with firebase but im getting stuck on this error:
error - unhandledRejection: FirebaseError: Messaging: This browser doesn't support the API's required to use the Firebase SDK. (messaging/unsupported-browser)
error - Error: Service messaging is not available.
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import { getStorage } from "firebase/storage";
import { getMessaging } from "firebase/messaging";
const firebaseConfig = {
...
};
const app = !firebase.apps.length
? firebase.initializeApp(firebaseConfig)
: firebase.app();
const messaging=getMessaging(app)
const db =app.firestore();
const auth=app.auth();
const provider=new firebase.auth.GoogleAuthProvider();
export const storage = getStorage(app);
export{db,auth,provider};
What can i do to solve this problem?
I am trying to implement firebase in my React application but it seems my version of importing is outdated.
Here is my code:
import firebase from "firebase/app";
import "firebase/auth";
const app = firebase.initializeApp({
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_FIREBASE_APP_ID,
});
export const auth = app.auth();
export default app;
I've replaced my config keys with process.env.REACT_APP_FIREBASE... as they are stored in another local .env file. I've also tried different ways of importing firebase, but it seems most posts are outdated. This is the error I am getting:
./src/firebase.js
Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase').
I also have another file for authContext so I will need to keep the 'auth' keyword in my firebase.js file:
import React, { useContext, useState, useEffect } from "react";
import { auth } from "../firebase";
const AuthContext = React.createContext();
export function useAuth() {
return useContext(AuthContext);
}
const AuthProvider = ({ children }) => {
const [currentUser, setCurrentUser] = useState();
function signup(email, password) {
return auth.createUserWithEmailAndPassword(email, password);
}
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged((user) => {
setCurrentUser(user);
});
return unsubscribe;
}, []);
const value = {
currentUser,
signup,
};
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
};
export default AuthProvider;
With version 9 things changed a bit for importing firebase, but there is no need to downgrade to a previous version, there is a "compatibility" option so can use the /compat folder in your imports, like this
import firebase from 'firebase/compat/app';
From the Firebase upgrade guide:
In order to keep your code functioning after updating your dependency
from v8 to v9 beta, change your import statements to use the "compat"
version of each import. For example:
// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
Follow the instructions in the documentation, which specifically calls out the steps for version 9:
Install Firebase using npm:
npm install firebase
Initialize Firebase in your app and create a Firebase App object:
import { initializeApp } from 'firebase/app';
// TODO: Replace the following with your app's Firebase project
configuration const firebaseConfig = { //... };
const app = initializeApp(firebaseConfig);
This is completely different than any method for any previous version of the Firebase SDKs. Note that you are importing individual functions from the Firebase SDK, not objects or namespaces.
To work with Firebase Auth, again follow the instructions in the documentation for v9:
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password);
Again note that you're importing functions to call directly, not objects with methods.
Compare to the old process with version 8: Upgrade to Firebase JS 8.0.0: Attempted import error: 'app' is not exported from 'firebase/app' (imported as 'firebase')
The error comes when you are using Firebase greater than V8.
There is an easy fix for this though, firebase includes backward compatibility. All you need to do is change your import from firebase/app to firebase/compat/app.
This will change:
import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';
to:
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import 'firebase/compat/auth';
Check your firebase version using the following command on npm
$ firebase -V
If your firebase version is v8 import as following
import firebase from "firebase/app"
import "firebase/auth"
If your firebase version is v9 import as following
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
You should downgrade your firebase version to 8.9.1 if you are using version 9.0
and then import firebase like this:
import firebase from "firebase/app"
Firebase v9 comes with new API designed to facilitate tree-shaking (removal of unused code). This will make your app as small and fast as possible.
The /compat packages are created for compatibility and to make the upgrade to the modular API easier. With the downside of not getting the performance perks. To get the performance benefits of the modular design, use getApps instead:
import { getApps, initializeApp } from 'firebase/app';
if (!getApps().length) {
initializeApp({
// your config
});
}
From the library's JSDoc: getApps return A (read-only) array of all initialized apps..
There is also a getApp function that When called with no arguments, the default app is returned. When an app name is provided, the app corresponding to that name is returned. An exception is thrown if the app being retrieved has not yet been initialized.
Uninstall and reinstall firebase to a downgraded version. I just did this, installed version 8.10.0, and works fine.
you need to do this if you are doing this on October 21 and greater days
import {initializeApp} from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'
import 'firebase/storage'
var config = {
apiKey: "xxxxx",
authDomain: "xx.firebaseapp.com",
projectId: "cxxx7",
storageBucket: "cxxx",
messagingSenderId: "xx",
appId: "zzze",
measurementId: "xxx"
}
const firebaseApp = initializeApp(config);
export default firebaseApp;
Trying to user firebase.firestore with react. Here is how I initialize firebase.
import React, { Component } from 'react'
import { Provider } from 'react-redux'
import store from './redux'
import Routes from './Routes'
import initFirebase from './initFirebase'
class App extends Component {
componentWillMount () {
initFirebase()
}
render () {
return <Provider store={store}>
{Routes}
</Provider>
}
}
export default App
And here is initFirebase.js
import firebase from 'firebase'
import store from './redux'
import { setAuth } from './redux/actions/auth'
export default () => {
// Initialize Firebase
var config = {
apiKey: 'AIzaSyC1H97dDoIVurLdgHOGgfRRubrTmb3YkTo',
authDomain: 'tree-of-life-ee870.firebaseapp.com',
databaseURL: 'https://tree-of-life-ee870.firebaseio.com',
projectId: 'tree-of-life-ee870',
storageBucket: 'tree-of-life-ee870.appspot.com',
messagingSenderId: '861153906067'
}
firebase.initializeApp(config)
firebase.auth().onAuthStateChanged(user => {
store.dispatch(setAuth(user))
})
}
And here I try to use firestore like this
import firebase from 'firebase'
import { SubmissionError } from 'redux-form'
import { browserHistory } from 'react-router'
const db = firebase.firestore()
And get the error like this
Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
So what's the right way to initialize firebase in a react enviorment?
You need initialize firebase before call firebase.firestore()
You can move
import firebase from 'firebase';
firebase.initializeApp(config);
to index.js file.