Firebase-js-sdk: Firestore is not a function

Created on 23 Jan 2018 · 13Comments · Source: firebase/firebase-js-sdk

[REQUIRED] Describe your environment

Operating System version: Windows 10.0.16299 Build 16299
Firebase SDK version: 4.9.0
Firebase Product: firestore

[REQUIRED] Describe the problem

I have a VueJs application and I would like to interact with my firestore database. I have already used a firebase database with a VueJs application, so I have followed the same process to implement a firestore binding (reading https://firebase.google.com/docs/firestore/quickstart).
However, want the app starts I got the following error
Uncaught TypeError: firebaseApp.firestore is not a function (firebase.js @15)

Steps to reproduce:

yarn add firebase (with yarn v1.3.2)

warning "firebase > @firebase/[email protected]" has unmet peer dependency "@firebase/app-types@^0.1.0".
warning "firebase > @firebase/[email protected]" has unmet peer dependency "@firebase/app-types@^0.1.0".
warning "firebase > @firebase/storage > @firebase/[email protected]" has unmet peer dependency "@firebase/app-types@^0.1.0".
warning "firebase > @firebase/auth > @firebase/[email protected]" has unmet peer dependency "@firebase/app-types@^0.1.0".
warning "firebase > @firebase/[email protected]" has unmet peer dependency "@firebase/app-types@^0.1.0".
warning "firebase > @firebase/firestore > @firebase/[email protected]" has unmet peer dependency "@firebase/app-types@^0.1.0".
warning "firebase > @firebase/messaging > @firebase/[email protected]" has unmet peer dependency "@firebase/app-types@^0.1.0".
warning "firebase > @firebase/database > @firebase/[email protected]" has unmet peer dependency "@firebase/app-types@^0.1.0".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 27 new dependencies.
├─ @firebase/[email protected]
├─ @firebase/[email protected]
├─ @firebase/[email protected]
├─ @firebase/[email protected]
├─ @firebase/[email protected]
├─ @firebase/[email protected]
├─ @firebase/[email protected]
├─ @firebase/[email protected]
├─ @firebase/[email protected]
├─ @firebase/[email protected]
├─ @firebase/[email protected]
├─ @firebase/[email protected]
├─ @firebase/[email protected]
├─ @firebase/[email protected]
├─ @firebase/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]

Define a firebase.js file to handle the firebaseApp configuration

import firebase from 'firebase';
import 'firebase/firestore';
const db = firebaseApp.firestore(); <- here where the error happens

Relevant Code:

Here is my firebase.js file

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

const firebaseApp = firebase.initializeApp({
  apiKey: '...',
  authDomain: '...',
  databaseURL: '...',
  projectId: '...',
  storageBucket: '...',
  messagingSenderId: '...',
});


const auth = firebaseApp.auth();
const db = firebaseApp.firestore();

export { db, auth };

I have seen other issues like mine at https://github.com/firebase/firebase-js-sdk/issues/182 or on StackOverflow (with previous versions of the firebase package). However, I am on the 4.9.0 version and it still happens.
Did I do something incorrectly?

Thanks !

firestore

Source

mlapeyre3

👍5

Most helpful comment

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

muhyidin3222 on 15 Mar 2019

🎉3

All 13 comments

Hey there @mlapeyre3. I would be suspicious of your build process at this point. I loaded up your example on stackblitz and it works fine (i.e. the code throws no errors and the db exists properly).

I'd try cleaning your yarn/npm cache and rebuilding. Additionally, ensure that you don't have multiple instances of @firebase/app in your dependency tree as the issue you're describing could be manifest through that.

jshcrowthe on 24 Jan 2018

Hi @jshcrowthe,

Hum this is weird :(
My ./nodes_modules folder has @firebase and firebase dependencies
2018-01-24_10h34_33
2018-01-24_10h34_18

I created a new project from scratch https://github.com/mlapeyre3/firestore-issue-464 to highlight my issue.
This is a vue-electron project crafted by https://github.com/SimulatedGREG/electron-vue

λ vue init simulatedgreg/electron-vue firestore-issue-464

  A newer version of vue-cli is available.

  latest:    2.9.2
  installed: 2.8.2

? Application Name firestore-issue-464
? Project description Project related to https://github.com/firebase/firebase-js-sdk/issue s/464
? Select which Vue plugins to install axios, vue-electron, vue-router, vuex
? Use linting with ESLint? Yes
? Which eslint config would you like to use? AirBNB
? Setup unit testing with Karma + Mocha? Yes
? Setup end-to-end testing with Spectron + Mocha? Yes
? What build tool would you like to use? packager
? author Mathieu Lapeyre <[email protected]>

   vue-cli · Generated "firestore-issue-464".

---

All set. Welcome to your new electron-vue project!

Make sure to check out the documentation for this boilerplate at
https://simulatedgreg.gitbooks.io/electron-vue/content/.

Next Steps:

  $ cd firestore-issue-464
  $ yarn (or `npm install`)
  $ yarn run dev (or `npm run dev`)

After this initialization, I ran yarn add firebase

λ yarn add firebase
yarn add v1.3.2
warning package.json: No license field
warning [email protected]: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "firebase > @firebase/[email protected]" has unmet peer dependency "@firebase/app-types@^0.1.0".
warning "firebase > @firebase/storage > @firebase/[email protected]" has unmet peer dependency "@firebase/app-types@^0.1.0".
warning "firebase > @firebase/[email protected]" has unmet peer dependency "@firebase/app-types@^0.1.0".
warning "firebase > @firebase/[email protected]" has unmet peer dependency "@firebase/app-types@^0.1.0".
warning "firebase > @firebase/auth > @firebase/[email protected]" has unmet peer dependency "@firebase/app-types@^0.1.0".
warning "firebase > @firebase/firestore > @firebase/[email protected]" has unmet peer dependency "@firebase/app-types@^0.1.0".
warning "firebase > @firebase/messaging > @firebase/[email protected]" has unmet peer dependency "@firebase/app-types@^0.1.0".
warning "firebase > @firebase/database > @firebase/[email protected]" has unmet peer dependency "@firebase/app-types@^0.1.0".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 27 new dependencies.
├─ @firebase/[email protected]
├─ @firebase/[email protected]
├─ @firebase/[email protected]
├─ @firebase/[email protected]
├─ @firebase/[email protected]
├─ @firebase/[email protected]
├─ @firebase/[email protected]
├─ @firebase/[email protected]
├─ @firebase/[email protected]
├─ @firebase/[email protected]
├─ @firebase/[email protected]
├─ @firebase/[email protected]
├─ @firebase/[email protected]
├─ @firebase/[email protected]
├─ @firebase/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]

You may see I created the file .\src\renderer\storagefirebase.js

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

function makeid() {
  let text = '';
  const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let i = 0;

  for (i; i < 5; i += 1) {
    text += possible.charAt(Math.floor(Math.random() * possible.length));
  }
  return text;
}

const firebaseApp = firebase.initializeApp({
  apiKey: '...',
  authDomain: '...',
  databaseURL: '...',
  projectId: '...',
  storageBucket: '...',
  messagingSenderId: '...',
}, makeid());

const auth = firebaseApp.auth();
const db = firebaseApp.firestore();

console.log(firebaseApp);

export { db, auth };

which is called in .\src\renderer\components\LandingPage.vue

Well .. I still get the error firebaseApp.firestore is not a function.

mlapeyre3 on 24 Jan 2018

After some research, I found https://scotch.io/tutorials/getting-started-with-firebase-cloud-firestore-build-a-vue-contact-app which use an other template of vue-cli (webpack instead of simulatedgreg/electron-vue) and it works perfectly ...

Thus I have asked the question at https://github.com/SimulatedGREG/electron-vue/issues/513
However @jshcrowthe you may have an idea (with https://github.com/mlapeyre3/firestore-issue-464) to help me tackle this issue. I confess I have no idea where the source of the error can come from.

mlapeyre3 on 24 Jan 2018

For testing purpose, I implement the SDK directly in the index.ejs file of my project.

    <script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-firestore.js"></script>
    <script>
      // Initialize Firebase
      var config = {
        apiKey: "...",
        authDomain: "...",
        databaseURL: "...",
        projectId: "...",
        storageBucket: "...",
        messagingSenderId: "..."
      };
      firebase.initializeApp(config);
      // Initialize Cloud Firestore through Firebase
      var db = firebase.firestore();
      console.log(firebase);
    </script>

gives me
screen shot 2018-01-30 at 19 10 29

while

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

const firebaseApp = firebase.initializeApp({
  apiKey: '...',
  authDomain: '...',
  databaseURL: '...',
  projectId: '...',
  storageBucket: '...',
  messagingSenderId: '...,
});


const auth = firebaseApp.auth();
const db = firebaseApp.firestore();

console.log(firebaseApp);

export { db, auth };

gives me
screen shot 2018-01-30 at 19 22 40

If this helps you ... for the moment I will continue with my ugly

Thanks for chiming in @bdiz. Closing this issue, but if somebody knows of something the Firebase SDK should be doing to make this work better, let us know.

mikelehen on 29 May 2018

WanderG's tip worked for me:
https://github.com/angular/angularfire2/issues/1374

pkthebud on 20 Jul 2018

👍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 innately. So the full code to fix it is:

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

muhyidin3222 on 15 Mar 2019

🎉3

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

The problem with this is it imports the entire SDK which, as seen in docs and from a warning in the browser console, is advised against.

idrisadetunmbi on 29 Apr 2019

I've got the same error in my Jest tests (app itself worked fine). But in my case it was related to firebase storage (not firestore). Solution was similar to the highlighted above:

import * as firebase from 'firebase';
import 'firebase/firebase-storage'; //added that line

UPDATE:
My tests were fixed but my app started to crash, so I removed that line from my app-related code. The final solution was to leave next line in my main code:

import * as firebase from 'firebase';
... and to add the next two lines to each of my tests:

import 'firebase/firebase-app';
import 'firebase/firebase-storage';

Now both tests and app work fine.

DmMhs on 15 May 2019

For testing purpose, I implement the SDK directly in the _index.ejs_ file of my project.
    <script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-firestore.js"></script>
    <script>
      // Initialize Firebase
      var config = {
        apiKey: "...",
        authDomain: "...",
        databaseURL: "...",
        projectId: "...",
        storageBucket: "...",
        messagingSenderId: "..."
      };
      firebase.initializeApp(config);
      // Initialize Cloud Firestore through Firebase
      var db = firebase.firestore();
      console.log(firebase);
    </script>
gives me

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

const firebaseApp = firebase.initializeApp({
  apiKey: '...',
  authDomain: '...',
  databaseURL: '...',
  projectId: '...',
  storageBucket: '...',
  messagingSenderId: '...,
});


const auth = firebaseApp.auth();
const db = firebaseApp.firestore();

console.log(firebaseApp);

export { db, auth };
gives me

If this helps you ... for the moment I will continue with my ugly

Related issues

FR: firebase.firestore.FieldValue.increment(value)

mohshraim · 3Comments

FR: Add Support for Firefox Extensions (moz-extension://)

ptrwtts · 4Comments

firebase 6.0,0 Auth: Uncaught TypeError: Cannot read property 'resolve' of undefined

henrylearn2rock · 4Comments

Could we have more than one array-contains filter?

camden-kid · 4Comments

Firebase Storage UploadTask Snapshot does not progress and completion callback/promise is never returned.

giladrom · 3Comments