尝试初始化 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】:
我通过导入多个库来修复它:firebase
和 firebase/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-admin
和firebase
包。 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 && rm -rf node_modules && 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 没有匹配的版本 >=0.7.0 <0.8.0 派生自