Javascript 尝试初始化 Cloud Firestore 时，firebase.firestore() 不是函数

firebase.firestore() is not a function when trying to initialize Cloud Firestore

提问by Eyk Rehbein

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

当我尝试初始化 Firebase Cloud Firestore 时，遇到以下错误：

Uncaught TypeError: WEBPACK_IMPORTED_MODULE_0_firebase.firestore is not a function

未捕获的类型错误：WEBPACK_IMPORTED_MODULE_0_firebase.firestore 不是函数

I installed firebase with npm install firebase --savepreviously.

我npm install firebase --save以前安装了firebase 。

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

回答by Eyk Rehbein

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

我通过导入多个库来修复它：firebase和firebase/firestore. 那是因为firebase核心库不包括 firestore 库。

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

回答by tcd1980

First, make sure you have latest version of firebase:

首先，确保您拥有最新版本的 firebase：

npm install [email protected] --save

Next, add both firebase and firestore:

接下来，添加 firebase 和 firestore：

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

Initialize the firebase app:

初始化 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();

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

来源：https: //firebase.google.com/docs/firestore/quickstart?authuser=0

回答by Atilla Baspinar

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

希望这对在将 Angular 应用程序部署到 Firestore 时遇到同样问题的人有所帮助。

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

在 Angular 8 项目中，我在部署到 Firestore 时遇到了同样的错误。我通过添加另一个模块AngularFirestoreModule 来修复它。

App.module.ts is like this:

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:

包.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.

更新：当我部署到其他托管服务提供商时，这没有帮助。对于这种情况，我添加了原始的 firebase 库并且它起作用了。

import { firestore } from 'firebase'; 

回答by Tim Arney

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

If you're using authentication as well

如果您也使用身份验证

import '@firebase/auth';

回答by bytecode

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

如果您是从较早版本的 firebase 进行更新，并且您正在解决这个问题，请尝试 const Firebase = require('firebase/firebase')而不是require('firebase/app')

回答by Jose A

If by any chance, your code is under witchcraft, and import firebase/firestorewon't work, then include it directly:

如果有任何机会，您的代码受巫术影响，import firebase/firestore无法正常工作，请直接包含它：

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

If it's not there, then:

如果它不存在，那么：

npm install @firebase/firestore

回答by Yousaf Azabi

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 /firebaseto the first line import * as firebase from 'firebase/firebase';and everything is working perfectly.

但是，它对我不起作用，但我添加/firebase到第一行import * as firebase from 'firebase/firebase';并且一切正常。

It also works with require:

它也适用于require：

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

回答by Yousaf Azabi

Solution for Angular 8 (as of 4th January 2020):

Angular 8 的解决方案（截至 2020 年 1 月 4 日）：

1. Delete package-lock.jsonfile
2. Run npm install
3. import AngularFirestoreModule from @angular/fire/firestore

1. 删除package-lock.json文件
2. 跑 npm install
3. import AngularFirestoreModule from @angular/fire/firestore

Just need to import AngularFirestoreModule.

只需要导入 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
]

回答by Javier Alejandro

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.

我曾经遇到过同样的问题，这是一个错误。我正在从 firebase 导入 firestore（它是由 IDE 自动完成的...），当时我应该从我初始化 firebase 应用程序的 .js 文件中导入它。

回答by Lester

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

我使用的是最新版本的 Angular 8.2.14，当我部署到生产时，它会导致这个问题，所以我将以下内容添加到 app.module.ts

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