Firestore is not a function #464

mlapeyre3 · 2018-01-23T17:05:42Z

[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/storage@0.1.6" has unmet peer dependency "@firebase/app-types@^0.1.0".
warning "firebase > @firebase/database@0.1.8" has unmet peer dependency "@firebase/app-types@^0.1.0".
warning "firebase > @firebase/storage > @firebase/storage-types@0.1.1" has unmet peer dependency "@firebase/app-types@^0.1.0".
warning "firebase > @firebase/auth > @firebase/auth-types@0.1.1" has unmet peer dependency "@firebase/app-types@^0.1.0".
warning "firebase > @firebase/firestore@0.3.1" has unmet peer dependency "@firebase/app-types@^0.1.0".
warning "firebase > @firebase/firestore > @firebase/firestore-types@0.2.1" has unmet peer dependency "@firebase/app-types@^0.1.0".
warning "firebase > @firebase/messaging > @firebase/messaging-types@0.1.1" has unmet peer dependency "@firebase/app-types@^0.1.0".
warning "firebase > @firebase/database > @firebase/database-types@0.1.1" has unmet peer dependency "@firebase/app-types@^0.1.0".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 27 new dependencies.
├─ @firebase/app-types@0.1.1
├─ @firebase/app@0.1.7
├─ @firebase/auth-types@0.1.1
├─ @firebase/auth@0.3.2
├─ @firebase/database-types@0.1.1
├─ @firebase/database@0.1.8
├─ @firebase/firestore-types@0.2.1
├─ @firebase/firestore@0.3.1
├─ @firebase/messaging-types@0.1.1
├─ @firebase/messaging@0.1.8
├─ @firebase/polyfill@0.1.4
├─ @firebase/storage-types@0.1.1
├─ @firebase/storage@0.1.6
├─ @firebase/util@0.1.7
├─ @firebase/webchannel-wrapper@0.2.6
├─ arguejs@0.2.3
├─ ascli@1.0.1
├─ bytebuffer@5.0.1
├─ colour@0.7.1
├─ dom-storage@2.0.2
├─ firebase@4.9.0
├─ grpc@1.8.4
├─ long@3.2.0
├─ optjs@3.2.2
├─ promise-polyfill@6.1.0
├─ protobufjs@5.0.2
└─ xmlhttprequest@1.8.0

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 #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 !

The text was updated successfully, but these errors were encountered:

jshcrowthe · 2018-01-24T01:25:13Z

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.

mlapeyre3 · 2018-01-24T09:31:01Z

Hi @jshcrowthe,

Hum this is weird :(
My ./nodes_modules folder has @firebase and firebase dependencies

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 <mathieu.lapeyre@gatech.edu>

   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 firestore-issue-464@0.0.0: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.1.3: The platform "win32" is incompatible with this module.
info "fsevents@1.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "firebase > @firebase/storage@0.1.6" has unmet peer dependency "@firebase/app-types@^0.1.0".
warning "firebase > @firebase/storage > @firebase/storage-types@0.1.1" has unmet peer dependency "@firebase/app-types@^0.1.0".
warning "firebase > @firebase/firestore@0.3.1" has unmet peer dependency "@firebase/app-types@^0.1.0".
warning "firebase > @firebase/database@0.1.8" has unmet peer dependency "@firebase/app-types@^0.1.0".
warning "firebase > @firebase/auth > @firebase/auth-types@0.1.1" has unmet peer dependency "@firebase/app-types@^0.1.0".
warning "firebase > @firebase/firestore > @firebase/firestore-types@0.2.1" has unmet peer dependency "@firebase/app-types@^0.1.0".
warning "firebase > @firebase/messaging > @firebase/messaging-types@0.1.1" has unmet peer dependency "@firebase/app-types@^0.1.0".
warning "firebase > @firebase/database > @firebase/database-types@0.1.1" has unmet peer dependency "@firebase/app-types@^0.1.0".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 27 new dependencies.
├─ @firebase/app-types@0.1.1
├─ @firebase/app@0.1.7
├─ @firebase/auth-types@0.1.1
├─ @firebase/auth@0.3.2
├─ @firebase/database-types@0.1.1
├─ @firebase/database@0.1.8
├─ @firebase/firestore-types@0.2.1
├─ @firebase/firestore@0.3.1
├─ @firebase/messaging-types@0.1.1
├─ @firebase/messaging@0.1.8
├─ @firebase/polyfill@0.1.4
├─ @firebase/storage-types@0.1.1
├─ @firebase/storage@0.1.6
├─ @firebase/util@0.1.7
├─ @firebase/webchannel-wrapper@0.2.6
├─ arguejs@0.2.3
├─ ascli@1.0.1
├─ bytebuffer@5.0.1
├─ colour@0.7.1
├─ dom-storage@2.0.2
├─ firebase@4.9.0
├─ grpc@1.8.4
├─ long@3.2.0
├─ optjs@3.2.2
├─ promise-polyfill@6.1.0
├─ protobufjs@5.0.2
└─ xmlhttprequest@1.8.0

You may see I created the file .\src\renderer\storage\firebase.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 · 2018-01-24T15:01:20Z

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 SimulatedGREG/electron-vue#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 · 2018-01-30T18:23:26Z

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 <script> tag in my index file 🤣

bdiz · 2018-04-28T22:17:08Z

I think I've got it... from a post related to importing codemirror with electron-webpack. electron-userland/electron-webpack#81

This worked for me.

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

mikelehen · 2018-05-29T05:56:07Z

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.

pkthebud · 2018-07-20T04:02:08Z

WanderG's tip worked for me:
angular/angularfire#1374

muhyidin3222 · 2019-03-15T06:01:05Z

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

idrisadetunmbi · 2019-04-29T04:44:44Z

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.

DmMhs · 2019-05-15T11:38:39Z

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.

Oyelamin · 2019-07-30T08:46:30Z

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 <script> tag in my index file 🤣
Thanks man, that saved me. I've figured it out, Thanks

samtstern · 2019-07-30T16:05:49Z

@Oyelamin could you open a new issue with this information and also include the SDK version you're using?

stewones · 2019-08-01T17:35:51Z

was facing the same

try to delete node_modules and package-lock.json

after that it should work

tried with latest 6.3.3

google-oss-bot added the api: firestore label Jan 23, 2018

mlapeyre3 mentioned this issue Jan 24, 2018

Firestore is not a function SimulatedGREG/electron-vue#513

Closed

willcode4food mentioned this issue Mar 4, 2018

WebpackError: package.json does not exist at /package.json when building with Firebase SDK gatsbyjs/gatsby#3686

Closed

mikelehen closed this as completed May 29, 2018

firebase locked and limited conversation to collaborators Oct 23, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Firestore is not a function #464

Firestore is not a function #464

mlapeyre3 commented Jan 23, 2018

jshcrowthe commented Jan 24, 2018

mlapeyre3 commented Jan 24, 2018 •

edited

Loading

mlapeyre3 commented Jan 24, 2018

mlapeyre3 commented Jan 30, 2018 •

edited

Loading

bdiz commented Apr 28, 2018

mikelehen commented May 29, 2018

pkthebud commented Jul 20, 2018

muhyidin3222 commented Mar 15, 2019

idrisadetunmbi commented Apr 29, 2019 •

edited

Loading

DmMhs commented May 15, 2019 •

edited

Loading

Oyelamin commented Jul 30, 2019

samtstern commented Jul 30, 2019

stewones commented Aug 1, 2019

Firestore is not a function #464

Firestore is not a function #464

Comments

mlapeyre3 commented Jan 23, 2018

[REQUIRED] Describe your environment

[REQUIRED] Describe the problem

Steps to reproduce:

Relevant Code:

jshcrowthe commented Jan 24, 2018

mlapeyre3 commented Jan 24, 2018 • edited Loading

mlapeyre3 commented Jan 24, 2018

mlapeyre3 commented Jan 30, 2018 • edited Loading

bdiz commented Apr 28, 2018

mikelehen commented May 29, 2018

pkthebud commented Jul 20, 2018

muhyidin3222 commented Mar 15, 2019

idrisadetunmbi commented Apr 29, 2019 • edited Loading

DmMhs commented May 15, 2019 • edited Loading

Oyelamin commented Jul 30, 2019

samtstern commented Jul 30, 2019

stewones commented Aug 1, 2019

mlapeyre3 commented Jan 24, 2018 •

edited

Loading

mlapeyre3 commented Jan 30, 2018 •

edited

Loading

idrisadetunmbi commented Apr 29, 2019 •

edited

Loading

DmMhs commented May 15, 2019 •

edited

Loading