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

Posted

技术标签:

【中文标题】尝试初始化 Cloud Firestore 时,firebase.firestore() 不是函数【英文标题】:firebase.firestore() is not a function when trying to initialize Cloud Firestore 【发布时间】:2018-03-20 01:28:28 【问题描述】:

当我尝试初始化 Firebase Cloud Firestore 时,我遇到了以下错误:

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

我之前用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();

【问题讨论】:

为什么将 firebase 依赖保存为 dev 依赖? 另外,您需要确保您拥有最新的 4.5.0 版本。检查您的package.json 并确保您设置了正确的版本 我卸载了 firebase 并使用 npm install --save firebase@4.5.0 安装了新版本,但它没有改变任何东西:/ @Phil @eykjs 第二次导入的正确语法是什么? import 'firebase/firestore' 是正确的语法。 【参考方案1】:

我通过导入多个库来修复它:firebasefirebase/firestore。那是因为firebase 核心库不包含firestore 库。

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

【讨论】:

如果您使用的是 React Native,则会在 android 上中断。在 ios 上似乎没问题:-/ 这在 2019 年 2 月完美运行。谢谢! :) 谢谢!第二个导入语句是我所缺少的。 我正在使用 vanilla js 构建一个简单的聊天应用程序,我在 html 文件的 head 标记中包含静态 URL 仍然出现此错误,请帮助,提前谢谢【参考方案2】:

首先,确保您拥有最新版本的 firebase:

npm install firebase@4.12.0 --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';

【讨论】:

对我来说,我不需要添加该导入行,但身份验证工作正常。为什么它只适用于 Firestore?【参考方案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",
...

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

import  firestore  from 'firebase'; 

【讨论】:

谢谢。就我而言,更新(import firestore from 'firebase'; )不是必需的。 男人。我很生气,添加 AngularFirestoreModule 解决了我的问题,哈哈。应用程序在本地没有它的情况下工作,但在 Heroku 上失败了。添加这个是修复......奇怪的是应用程序在几个月前没有它工作。猜猜我所做的更新需要这个。 非常感谢!将 AngularFirestoreModule 添加到导入中节省了一天!【参考方案5】:

您可以使用凭据在您的应用程序上创建一个单独的组件来初始化 firebase。

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

如果需要处理数据库操作,不需要每次都调用initialize方法,可以使用之前创建的通用组件方法。

import FirebaseContext from "./firebase-context";

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

【讨论】:

【参考方案6】:

如果万一你的代码在巫术之下,import firebase/firestore 不起作用,那么直接包含它:

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

如果不存在,那么:

npm install @firebase/firestore

【讨论】:

当我添加时为我工作: - npm install @firebase/firestore【参考方案7】:

问题是没有导入firestore

firebase 有很多功能。

您需要从下面的列表中导入或从 CDN 导入您想要实现的内容。

官方参考说要加载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>

如果你想使用 npm,在这里

npm install firebase@7.19.0 --save

网址在这里https://firebase.google.com/docs/firestore/quickstart?authuser=0#set_up_your_development_environment

【讨论】:

【参考方案8】:

我有同样的错误并尝试关注官方网站但没有工作。 然后我用谷歌搜索错误并登陆了这篇文章。

我试过了:

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

【讨论】:

【参考方案9】:

如果您是从早期版本的 firebase 进行更新,并且您对这个问题不以为然,请尝试 const Firebase = require('firebase/firebase') 而不是 require('firebase/app')

【讨论】:

【参考方案10】:

要使用 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>

【讨论】:

第二个脚本是添加firebase存储。 Firestore 不需要它。【参考方案11】:

就我而言,问题是我不小心在package.json 中添加了firebase-adminfirebase 包。 firebase-admin 具有优先权,因此即使根据接受的答案添加导入后,我仍然遇到相同的错误。

从客户端应用程序中删除多余的firebase-admin 解决了问题。

请注意,firebase-admin 旨在供服务器端以管理员模式运行,而 firebase 包是客户端库。

【讨论】:

【参考方案12】:

Angular 8 的解决方案(截至 2020 年 1 月 4 日):

    删除package-lock.json文件 运行npm install import AngularFirestoreModule from @angular/fire/firestore

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

【讨论】:

这个答案可能重复***.com/a/57593859/8020389 我提供了专门为 angular 8 latest 工作的解决方案。 这对我有帮助,但您还需要将 AngularFirestoreModule 添加到提供程序 很高兴知道,它有帮助!【参考方案13】:

如果您使用的是版本 9 的 firebase,那么您需要改用它:

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

这是从版本 8 升级到版本 9 的链接https://firebase.google.com/docs/web/modular-upgrade

【讨论】:

【参考方案14】:

如果你和我一样,喜欢打字稿上的所有内容(顺便说一句,这是目的),你可以试试:

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

【讨论】:

【参考方案15】:

删除node_modules 目录和package-lock.json 然后运行npm install 为我修复了它。

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

【讨论】:

【参考方案16】:

我以前也有同样的问题,这是一个错误。当我应该从初始化firebase应用程序的.js文件中导入它时,我正在从firebase导入firestore(它是由IDE自动完成的......)。

【讨论】:

【参考方案17】:

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

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

【讨论】:

【参考方案18】:

我找到了a useful comment in Github alclimb

他提到 firebase 分析无法在 Node.js 中工作,因为它意味着要与浏览器一起使用(官方文档中有提及)

【讨论】:

【参考方案19】:

为 Nativescript 启用 Firestore

在插件安装过程中,系统会询问您是否使用 Firestore。

如果您正在升级并且项目根目录中有firebase.nativescript.json 文件,请对其进行编辑并添加:"firestore": true。然后运行rm -rf platforms &amp;&amp; rm -rf node_modules &amp;&amp; npm i

初始化/初始化应用程序

默认情况下,iOS 和 Android 上的 Firestore 会在本地保存数据以供离线使用(Web 默认情况下不会,常规 Firebase DB 也不会在任何平台上)。如果您不喜欢这个很棒的功能,可以将persist: false 传递给init function。

请注意,initializeApp 只是 init 的别名,以使插件与 Web API 兼容。

const firebase = require("nativescript-plugin-firebase/app");

firebase.initializeApp(
  persist: false
);

收藏

“集合”是任何 Firestore 交互的根源。数据作为“文档”存储在集合中。

 const citiesCollection = firebase.firestore().collection("cities");

来源:nativescript-plugin-firebase

【讨论】:

【参考方案20】:

在客户端的 vanilla javascript 中,您需要包含此脚本才能使其工作:

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

因为它不包含在默认的 sn-p 中,所以 Google 会要求您复制粘贴到您的网站中。

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

【讨论】:

【参考方案21】:
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

【讨论】:

欢迎来到 Stack Overflow。当代码附有解释时,它会更有帮助。 Stack Overflow 是关于学习的,而不是提供 sn-ps 来盲目复制和粘贴。请编辑您的答案并解释它如何回答所提出的具体问题。见【如何回答】***.com/questions/how-to-answer)【参考方案22】:

对于 2022 年的读者,请查看您的 firebase 版本。

现在的最新版本是 9.x。它与大多数 YouTube 指南几乎没有什么不同。

您需要firebase@8.x 才能遵循 YouTube 指南。

npm uninstall firebase

npm install firebase@8.x

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

【讨论】:

【参考方案23】:

我想我已经为使用 electron-webpack 的人们提供了它。解决方案来自与导入 codemirror 相关的帖子。 https://github.com/electron-userland/electron-webpack/issues/81

这对我有用。

// package.json

  //...
  "electronWebpack": 
    "whiteListedModules": [
      "firebase"
    ]   
  ,
  //...

【讨论】:

【参考方案24】:

在我的情况下,错误是因为我在实际导入“firebase/firestore”之前尝试导入使用了 firebase.firestore() 的文件

【讨论】:

【参考方案25】:

要在 Node.js 上使用 Firestore 云函数,您应该使用 admin.firestore() 而不是 admin.database()。此外,您应该确保 package.json 上的模块 firebase-admin 达到 5.4.1 或更高。看起来像这样:


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

【讨论】:

问题没有说明这一点,但它是关于客户端网络应用程序,而不是节点服务器应用程序。 如果您考虑使用使用 vue / angular 构建的网络应用程序,我认为您的答案是不正确的。它作为服务器应用程序运行良好【参考方案26】:

答案只是将这些脚本链接到您的 html 文件中并检查问题是否已解决

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

如果对解决您的问题有帮助,请给予支持

【讨论】:

看来您可能误会了。问题是询问 node.js 问题,因此 html 标签不会有太大帮助。此外,为了提高您的回答质量,请尽量不要要求投票。

以上是关于尝试初始化 Cloud Firestore 时,firebase.firestore() 不是函数的主要内容,如果未能解决你的问题,请参考以下文章

无法安装 cloud_firestore 所需的 BoringSSL-GRPC (0.0.7)

致命错误:找不到模块“cloud_firestore”

未找到模块“cloud_firestore”

包 cloud_firestore 没有匹配的版本 >=0.7.0 <0.8.0 派生自

在本地测试 Cloud Functions 时,Cloud Firestore 模拟器未运行

安装 cloud_firestore 包后在 Flutter 中的 iOS 模拟器上运行应用程序时出错