How to import Firebase Firestore into a create-react-app project using ES6 syntax

Question

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

Answer 1

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