100

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

Uncaught TypeError: WEBPACK_IMPORTED_MODULE_0_firebase.firestore is not a function

I installed firebase with npm install firebase --save previously.

import * as firebase from 'firebase';
import router from '../router';

const config = {
        apiKey: "a",
        authDomain: "a",
        databaseURL: "a",
        projectId: "a",
        storageBucket: "a",
        messagingSenderId: "a"
};
if(!firebase.apps.length){
  firebase.initializeApp(config);
  let firestore = firebase.firestore();
}
7
  • Why have you saved the firebase dependency as a dev dependency?
    – Phil
    Oct 9, 2017 at 1:55
  • Also, you need to make sure you have version 4.5.0 which is quite recent. Check your package.json and make sure you have the right version set
    – Phil
    Oct 9, 2017 at 1:57
  • I uninstalled firebase and installed the new version with npm install --save [email protected] but it didn't change anything :/ @Phil Oct 9, 2017 at 14:19
  • @eykjs What is the correct syntax for the second import?
    – riper
    Nov 2, 2017 at 17:01
  • 1
    import 'firebase/firestore' would be the right syntax. Dec 27, 2017 at 9:46

29 Answers 29

155

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 firebase from 'firebase/app';
import 'firebase/firestore';
4
  • 1
    Breaks on Android if you are using React Native. Seems to be fine on iOS :-/ Nov 19, 2018 at 13:22
  • 2
    This works perfectly as of February 2019. Thank you!! :)
    – Imdad
    Feb 2, 2019 at 21:47
  • 2
    Thank you! The second import statement was what I was missing. Apr 8, 2019 at 2:28
  • 1
    Im using vanilla js for building a simple chat app,I have included static URL in the head tag of the HTML file still I'm getting this error,pls help,thanks in advance
    – Aashiq
    Jun 17, 2020 at 6:03
25

If you are using the version the version 9 of firebase, then you need to use this instead:

// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';

Here is the link for the upgrade from version 8 to version 9 https://firebase.google.com/docs/web/modular-upgrade.

Keep in mind: the compat libraries are a temporary solution that will be removed completely in a future major SDK version (such as version 10 or version 11). Your ultimate goal is to remove compat code and keep only version 9 modular-style code in your app.

For the time being, you can utilize compat libraries but you should try to switch from compat to modular in the future.

0
19

First, make sure you have latest version of firebase:

npm install [email protected] --save

Next, add both firebase and firestore:

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

Initialize the firebase app:

firebase.initializeApp({
  apiKey: '### FIREBASE API KEY ###',
  authDomain: '### FIREBASE AUTH DOMAIN ###',
  projectId: '### CLOUD FIRESTORE PROJECT ID ###'
});

// Initialize Cloud Firestore through Firebase
var db = firebase.firestore();

source: https://firebase.google.com/docs/firestore/quickstart?authuser=0

15
import { firebase } from '@firebase/app';
import '@firebase/firestore'

If you're using authentication as well

import '@firebase/auth';
1
  • For me I didn't require to add that import line but auth worked fine. Why is it only for firestore?
    – Apps 247
    Oct 31, 2020 at 4:04
8

I also struggled with this for a bit. what I did in the end was quite straightforward.

for versions 9 and higher, just do the following

import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import 'firebase/compat/auth';

// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: 
  authDomain: 
  projectId: 
  storageBucket: 
  messagingSenderId: 
  appId: 
};

// Initialize Firebase

const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore;
const auth = firebaseApp.auth();


export { auth };
export default db; 

//cheers
1
  • Welcome to Stack Overflow. Code is a lot more helpful when it is accompanied by an explanation. Stack Overflow is about learning, not providing snippets to blindly copy and paste. Please edit your answer and explain how it answers the specific question being asked. See [How to Answer]stackoverflow.com/questions/how-to-answer) Dec 21, 2021 at 15:07
7

Hope this helps to someone who faces the same problem when deploying an Angular app to Firestore.

In Angular 8 project, I had the same error when deploying to Firestore. I fixed it by adding another module AngularFirestoreModule.

App.module.ts is like this:

...
import { AngularFireModule } from '@angular/fire';
import { AngularFirestore, AngularFirestoreModule } from '@angular/fire/firestore'; // << Note AngularFirestoreModule !!!
import { AngularFireDatabaseModule } from '@angular/fire/database';
...

imports: [
    BrowserModule,
    FormsModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,
    AngularFireDatabaseModule,
...

package.json:

...
"dependencies": {
    "@angular/animations": "~8.2.2",
    "@angular/common": "~8.2.2",
    "@angular/compiler": "~8.2.2",
    "@angular/core": "~8.2.2",
    "@angular/fire": "^5.2.1",
    "@angular/forms": "~8.2.2",
    "@angular/platform-browser": "~8.2.2",
    "@angular/platform-browser-dynamic": "~8.2.2",
    "@angular/router": "~8.2.2",
    "ajv": "^6.10.2",
    "bootstrap-scss": "^4.3.1",
    "core-js": "^2.5.4",
    "firebase": "^6.4.0",
...

UPDATE: When I deployed to some other hosting provider, this did not help. For this case, I added the original firebase library and it worked.

import { firestore } from 'firebase'; 
3
  • Thanks. In my case, the update (import { firestore } from 'firebase'; ) was not necessary. Sep 28, 2019 at 14:53
  • man. I was getting mad, adding AngularFirestoreModule fixed my issue lol. App worked without it locally but failed on Heroku. Adding this was the fix... weird that the app worked without it a few months ago. Guess an update I did required this.
    – Mark B
    Oct 12, 2019 at 15:01
  • Thanks a lot! Adding AngularFirestoreModule to imports saved the day! Jan 27, 2020 at 9:55
5

You can create a separate component for initialization of firebase on you application using credentials.

firebase-context.js

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

const firebaseConfig = {
            apiKey: "XXXX",
            authDomain: "XXXXX.firebaseapp.com",
            databaseURL: "https://XXXX-app-web.firebaseio.com",
            projectId: "XXXX",
            storageBucket: "XXXX-app-web.appspot.com",
            messagingSenderId: "XXXXXX",
            appId: "1:XXX:web:XXXX",
            measurementId: "G-XXXX"
        };

export default !firebase.apps.length 
  ? firebase.initializeApp(firebaseConfig).firestore()
  : firebase.app().firestore();

In case, you need to deal with database operation you don't need to call the initialize method each time, you can use common component method which is earlier created.

import FirebaseContext from "./firebase-context";

export const getList = () => dispatch => {
    FirebaseContext.collection("Account")
        .get()
        .then(querySnapshot => {
            // success code
        }).catch(err => {
            // error code
        });
}
4

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
1
  • worked for me when i added: - npm install @firebase/firestore
    – iAviator
    Apr 28, 2020 at 19:47
3

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.

enter image description here 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 [email protected] --save

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

2

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");
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')

2

In my case the problem was that I've accidentally added firebase-admin alongside with the firebase package in my package.json. And firebase-admin took precedence so even after adding the imports as per the accepted answer I was still getting the same error.

Removing the redundant firebase-admin from the client app fixed the problem.

As a note, firebase-admin is intended for server side to operate in admin mode, while the firebase package is a client side library.

2
import { getFirestore } from "firebase/firestore";

Just try this and see how it goes

2
  • 1
    let db = getFirestore(); export default db; Feb 4, 2022 at 22:11
  • 1
    Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Feb 5, 2022 at 3:18
1

To use firestore you need to add this link at the top of your html page.

//After initializing firebase, in your main javascript page call...
var data = firebase.firestore();
<script src="https://www.gstatic.com/firebasejs/7.1.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.2.3/firebase-storage.js"></script>

1
  • The second script is to add firebase storage. You don't need it for the firestore. Oct 16, 2019 at 1:04
1

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
]
4
  • Possible duplicate of this answer stackoverflow.com/a/57593859/8020389 Jan 4, 2020 at 14:07
  • I gave my solution that worked specifically for angular 8 latest.
    – user12602844
    Jan 7, 2020 at 9:14
  • this helped me, but you also need to add AngularFirestoreModule to providers
    – Lester
    Jan 22, 2020 at 21:57
  • Glad to know , it helped!
    – user12602844
    Jan 23, 2020 at 14:15
0

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");
0

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

0

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.

0

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],
0

I found a useful comment in Github by alclimb

he mentioned about firebase analytics won't work in Node.js, because it meant to be used with a browser (this is mention in the official documentation)

0

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

0

In vanilla javascript on the client you need to include this script to make it work:

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

as it's not included in the default snippet Google asks you to copy paste in your website.

Source: https://firebase.google.com/docs/firestore/quickstart?authuser=0

0

For 2022 readers, please check your firebase version.

The latest version now is 9.x. It is little different from mostly YouTube guides.

You need [email protected] to follow YouTube guides.

npm uninstall firebase

npm install [email protected]

Docs: https://firebase.google.com/docs/firestore/quickstart?authuser=0#web-version-9_1

1
  • What is it about frameworks and libraries constantly changing things seemingly w/o purpose? Thank you for this! A very big help, and so frustrating firebase has entirely changed the way they handle things.
    – Gary
    Jun 28, 2022 at 2:28
0

For version 9 of firebase you can use

import firebase from 'firebase/compat/app';
import "firebase/compat/firestore"; 
1
  • 1
    Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Ethan
    Jun 17, 2022 at 22:19
0

For me, the issue came from using the wrong import. I create the firebase app elsewhere in my code with initializeApp. This is a server side node.js app. Firebase Admin cannot be used in the client anyway.

Incorrect

import admin from 'firebase-admin';

this.stripeAccountColl = admin.firestore(this.firebaseApp).collection("StripeAccount");

Correct

import { getFirestore } from 'firebase-admin/firestore';

this.stripeAccountColl = getFirestore(this.firebaseApp).collection("StripeAccount");

-1

In my case, the error was because I tried to import a file that used firebase.firestore() before I actually imported "firebase/firestore"

0
-2

To use Firestore cloud functions on Node.js you should use admin.firestore() instead of admin.database(). Also you should be sure that your module firebase-admin on package.json is up to 5.4.1 or above. Looking like something like:

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "dependencies": {   
    "firebase-admin": "^5.4.1",
    "firebase-functions": "^0.7.0"
  }
}
2
  • 6
    Question doesn't clarify that but it's regarding a client web app, not a Node server app.
    – riper
    Nov 2, 2017 at 17:08
  • I think your answer is incorrect if you consider usage for a web app built with vue / angular. It works fine as a server app
    – Sn0wfreeze
    Jan 7, 2019 at 10:41
-2

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"
    ]   
  },
  //...
}
-4

simply the answer is just to link these script in your html file and check that the issue is resolved

script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"

script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js

gives upvote if it is helpful for fixing your problem

1
  • It looks like you might be misunderstanding. The question is asking about a node.js problem, so html tags won't be much help. Also, to keep the quality of your answers up, try refraining from asking for upvotes. May 19, 2021 at 19:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.