firebase2.default.firestore is not a function - React Firebase

Question

I am trying to use firestore in my reactjs app.

When i call firestore from firebase config object.

It says

firebase2.default.firestore is not a function

Here is the code

import firebase from 'firebase'

const config = {
  apiKey: "AIzaSxxxxxxqpUeqKXI",
    authDomain: "payxxxxxa1.firebaseapp.com",
    databaseURL: "https://payxxxxxxxa1.firebaseio.com",
    projectId: "payxxxxxxja1",
    storageBucket: "payxxxxxa1.appspot.com",
    messagingSenderId: "281xxxxxxxx576"
}

firebase.initializeApp(config)

export const fire = firebase
export const ref = firebase.database().ref()
export const firebaseAuth = firebase.auth
export const messaging = firebase.messaging();
export const db = firebase.firestore();

Firebase version is 4.5.0

npm list firebase > [email protected]

Am i doing wrong?

Answer 1

If you're using the official firebase npm package, this is how you import it.

import firebase from 'firebase';
import 'firebase/firestore';

Answer 2

ES6:

import '@firebase/firestore'

reference: https://www.npmjs.com/package/@firebase/firestore

Answer 3

I have resolved this issue by using require('firebase/firestore')

Answer 4

I fixed it by importing multiple libraries: firebase and firebase/firestore. That's because the firebase core library does not include the firestore library innately. So the full code to fix it is:

import * as firebase from 'firebase';
import 'firebase/firestore';