I\'m having trouble getting Firebase Firestore to work with the basic create-react-app boilerplate. Does anyone have a working sample?
The Get Started doc only expla
I created a config file for firebase:
import * as firebase from 'firebase';
const config = { /* COPY THE ACTUAL CONFIG FROM FIREBASE CONSOLE */
apiKey: "apiKey",
authDomain: "domen.firebaseapp.com",
databaseURL: "https://domen.firebaseio.com",
projectId: "lavs-mercury",
storageBucket: "",
messagingSenderId: "id"
};
export default firebase.initializeApp(config);
Then I just import this module to file where I want to use. For example:
import * as actionTypes from './actionTypes';
import firebase from "../../firebase-module";
export const logout = () => {
firebase.auth().signOut();
return {
type: actionTypes.LOGOUT
}
};
This worked for me.
Make sure you have installed npm install --save firebase
import 'firebase/firestore';
This worked for me:
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/datastore';
From https://github.com/firebase/reactfire#using-the-firebase-js-sdk-in-react
Two months later, this is working for me:
import * as firebase from 'firebase';
import '@firebase/firestore';
(It also works without the '@'.)
Here's the dependencies section from my package.json:
{
...
"dependencies": {
"@firebase/app": "^0.2.0",
"@firebase/firestore": "^0.4.1",
"firebase": "^4.13.1",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.4"
},
...
}
I started out following the instructions on npmjs.com for the firebase package. In its dependencies, I found @firebase/firestore, and tried to follow those instructions, which say to import like this:
import firebase from '@firebase/app';
import '@firebase/firestore'
However, this method of importing firebase didn't work for me -- I was able to initialize my app, but trying to execute firebase.auth().signInWithPopup(provider)
caused an error:
TypeError: WEBPACK_IMPORTED_MODULE_0__firebase_app.default.auth is not a function
My trouble was that I was trying to use ES6 syntax. The Firebase docs say to access it via something like:
const firebase = require('firebase');
require('firebase/firestore');
Whereas I wanted to do something like this:
import * as Firebase from 'firebase';
import Firestore from 'firebase/firestore';
That didn't seem to work, but this does:
import * as Firebase from 'firebase';
require('firebase/firestore');
I don't like mixing import
and require
, but good enough for now.