firebase.firestore() is not a function when trying to initialize Cloud Firestore

Question

When I try to initialize Firebase Cloud Firestore, I ran into the following error:

Uncaught TypeError: WEBPACK_IMPORTED_MODULE_0_firebase

Answer 1

If by any chance, your code is under witchcraft, and import firebase/firestore won't work, then include it directly:

import '@firebase/firestore/dist/esm/index';

If it's not there, then:

npm install @firebase/firestore

Answer 2

If you are updating from an earlier version of firebase and you are pulling your hair out about this issue, try const Firebase = require('firebase/firebase') instead of require('firebase/app')

Answer 3

Solution for Angular 8 (as of 4th January 2020):

1. Delete package-lock.json file
2. Run npm install
3. import AngularFirestoreModule from @angular/fire/firestore

Just need to import AngularFirestoreModule.

// App.module.ts

import { AngularFireModule } from '@angular/fire';
import { AngularFirestore, AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireDatabaseModule } from '@angular/fire/database';
imports: [
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,
    AngularFireDatabaseModule
]

Answer 4

I think I've got it for folks using electron-webpack. Solution was from a post related to importing codemirror. https://github.com/electron-userland/electron-webpack/issues/81

This worked for me.

// package.json
{
  //...
  "electronWebpack": {
    "whiteListedModules": [
      "firebase"
    ]   
  },
  //...
}

Answer 5

I used to have the same problem, it was a bug. I was importing firestore from firebase (it was done automatically by the IDE...) when i should imported it from the .js file where i initialized firebase app.

Answer 6

Removing node_modules directory together with package-lock.json and then running npm install fixed it for me.

https://github.com/angular/angularfire2/issues/1880