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 explains how to set it up with require statements, whereas I'd like to use ES6 imports.

const firebase = require("firebase");
// Required for side-effects
require("firebase/firestore");

What is the ES6 equivalent of require('firebase/firestore')?

Answer 1

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

Answer 2

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.