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 you're like me and like everything typed on typescript (it's the purpose, by the way), you can try:

import * as firebase from "nativescript-plugin-firebase";
import { User, firestore } from "nativescript-plugin-firebase";

import * as firebaseapp from "nativescript-plugin-firebase/app";

So you can do stuff like that:

firebase.getCurrentUser().then((user: User) => { /* something */ });

const mycollection : firestore.CollectionReference = firebaseapp.firestore().collection("mycollection");

Answer 2

I fixed it by importing multiple libraries: firebase and firebase/firestore. That's because the firebase core library does not include the firestore library.

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

Answer 3

Enabling Firestore for Nativescript

During plugin installation you'll be asked whether or not you use Firestore.

In case you're upgrading and you have the firebase.nativescript.json file in your project root, edit it and add: "firestore": true. Then run rm -rf platforms && rm -rf node_modules && npm i.

init / initializeApp

By default Firestore on iOS and Android persists data locally for offline usage (web doesn't by default, and the regular Firebase DB doesn't either on any platform). If you don't like that awesome feature, you can pass persist: false to the init function.

Note that initializeApp is simply an alias for init to make the plugin compatible with the web API.

const firebase = require("nativescript-plugin-firebase/app");

firebase.initializeApp({
  persist: false
});

collection

A 'collection' is at the root of any Firestore interaction. Data is stored as a 'document' inside a collection.

 const citiesCollection = firebase.firestore().collection("cities");

Source: nativescript-plugin-firebase

Answer 4

The problem is not import the firestore

firebase has many features.

You need to import or import from the CDN what you want to implement from the list below.

The official reference says to load firebase-firestore.js.

<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-firestore.js"></script>

if you want to use npm, here

npm install firebase@7.19.0 --save

url is here
https://firebase.google.com/docs/firestore/quickstart?authuser=0#set_up_your_development_environment

Answer 5

I am using the latest version of Angular 8.2.14, when I deployed to production, it cause this problem, so I add the following to app.module.ts

        imports: [
        ...,
        AngularFireModule.initializeApp(environment.firebaseConfig),
        AngularFirestoreModule,
        AngularFireDatabaseModule,
...
      ],
      providers: [AngularFirestore, AngularFirestoreModule],

Answer 6

I had same Error and tried to follow the official website but did not work. Then I googled error and landed in this post.

I tried:

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

However, it did not work for me but I added /firebase to the first line import * as firebase from 'firebase/firebase'; and everything is working perfectly.

It also works with require:

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