Firebase.firestore() не является функцией при попытке инициализировать Cloud Firestore

Когда я пытаюсь инициализировать Firebase Cloud Firestore, я столкнулся со следующей ошибкой:

Uncaught TypeError: WEBPACK_IMPORTED_MODULE_0_firebase.firestore не является функцией

Я установил firebase с помощью npm install firebase --save ранее.

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();
}

Ответ 1

Я исправил это, импортировав несколько библиотек: firebase и firebase/firestore. Это потому, что основная библиотека firebase не включает в себя библиотеку Firestore.

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

Ответ 2

Во-первых, убедитесь, что у вас установлена последняя версия firebase:

npm install [email protected] --save

Затем добавьте как Firebase, так и Firestore:

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

Инициализируйте приложение Firebase:

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

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

источник: https://firebase.google.com/docs/firestore/quickstart?authuser=0

Ответ 3

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

Если вы также используете аутентификацию

import '@firebase/auth';

Ответ 4

Надеюсь, это поможет тому, кто столкнулся с той же проблемой при развертывании приложения Angular в Firestore.

В проекте Angular 8 у меня была такая же ошибка при развертывании в Firestore. Я исправил это, добавив еще один модуль AngularFirestoreModule.

App.module.ts выглядит так:

...
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: Когда я развернул на другом хостинг-провайдере, это не помогло. Для этого случая я добавил оригинальную библиотеку FireBase, и она работала.

import { firestore } from 'firebase';

Ответ 5

Если случайно ваш код находится под колдовством, а import firebase/firestore не будет работать, включите его напрямую:

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

Если это не так, то:

npm install @firebase/firestore

Ответ 6

У меня была та же ошибка и я пытался перейти на официальный сайт, но ничего не вышло. Тогда я погуглил ошибку и попал в этот пост.

Я старался:

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

Однако, у меня это не сработало, но я добавил /firebase к первой строке import * as firebase from 'firebase/firebase'; и все работает отлично.

Также работает с require:

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

Ответ 7

Если вы обновляете более раннюю версию firebase и хотите решить эту проблему, попробуйте const Firebase = require('firebase/firebase') вместо require('firebase/app')

Ответ 8

Шаги:

npm install [email protected] --save

импортируйте следующие файлы:

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

объявить эти переменные глобально

export const environment = {
    dev: {
        apiKey: 'something....',
        authDomain: 'something...',
        databaseURL: 'something...',
        projectId: 'something...',
        storageBucket: 'something...',
        messagingSenderId: 'something...'
    }
};

mFirestore: firebase.firestore.Firestore = null;
mDatabase: firebase.database.Database = null;
mAuth: firebase.auth.Auth = null;
mApp: firebase.app.App = null;

на некоторой функции/конструкторе, вызовите эту функцию

initializeDatabases() {
     this.mApp = firebase.initializeApp(environment.dev, 'development');
     this.mAuth = this.mApp.auth();
     this.mDatabase = this.mApp.database();
     this.mFirestore = this.mApp.firestore();
     // use console.log(...) to see if they are initialized correctly
     // you can use multiple databases like this, just use another set of 4 variables with different config/options
}

Затем используйте так:
```
readData() {
     var doc = this.mFirestore.doc('...some path....');
     doc.get().then((data) => {
          // do your tasks here
     });
}
```
Примечание. Я использовал это в приложении Ionic 2, которое использует Angular2 (& Typescript).

Ответ 9

Я думаю, что у меня есть это для людей, использующих электронный веб-пакет. Решение было из поста, связанного с импортом codemirror. https://github.com/electron-userland/electron-webpack/issues/81

Это сработало для меня.

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

Ответ 10

Если вы похожи на меня и любите все, что набрано на машинописи (это, кстати, цель), вы можете попробовать:

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

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

Так что вы можете делать такие вещи:

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

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

Ответ 11

Удаление директории node_modules вместе с package-lock.json и последующий запуск npm install исправили это для меня.

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

Ответ 12

Чтобы использовать FireStore, вам нужно добавить эту ссылку в верхней части HTML-страницы.

//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>

Ответ 13

Чтобы использовать Firestore облачные функции на Node.js, вы должны использовать admin.firestore() вместо admin.database(). Также вы должны быть уверены, что ваш модуль firebase-admin на package.json равен 5.4.1 или выше. Смотря что-то вроде:

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "dependencies": {   
    "firebase-admin": "^5.4.1",
    "firebase-functions": "^0.7.0"
  }
}