类星体中的 Firebase 未定义答案

【问题标题】：Firebase is Undefined in Quasar类星体中的 Firebase 未定义
【发布时间】：2021-10-28 06:00:46
【问题描述】：

我正在尝试让 Firebase 与我的小测试 Quasar 项目一起工作。我最初关注的是 Danny Connell 的教程之一，但我已将代码精简到最低限度，以便隔离错误。

我的 firebase 导入代码是：

import firebase from '@firebase/app'
console.log(" in file ", firebase)

这样我就可以看到“firebase”的输出结果。在我的 chrome 控制台中，我得到了这个：

in file  undefined

这告诉我它并没有真正导入 firebase ......对吗？（我对这一切都很陌生，所以请耐心等待。）

我的 package.json 文件有以下依赖：

"dependencies": {
"@firebase/app": "^0.7.0",
"@firebase/firestore": "^3.0.0",
"@quasar/extras": "^1.0.0",
"core-js": "^3.6.5",
"date-fns": "^2.23.0",
"emailjs-com": "^3.2.0",
"express": "^4.17.1",
"mysql": "^2.18.1",
"quasar": "^2.0.0"

我尝试了各种不同的导入脚本语法，但由于我的 package.json 文件有“@firebase/..”，我假设这是我需要导入的语法。

我的 Mac 正在运行 firebase -V 9.16.6，所以我正在使用新的模块化版本的 firebase，我不知道这是否重要。但是我没有紧凑的参考，我不知道这是否重要。也许这在 package.json 文件中是必需的？我不知道。

我的合作伙伴（也是一名从事 React 工作的程序员）认为我的 Mac 实际上并没有运行我认为的代码/版本，但我现在不知道如何找出答案。

无论如何，当我尝试输入 firebase.initializeApp(firebaseConfig) 代码时，我会遇到更多错误，所以我暂时将其排除在外。我只需要firebase不是未定义的，然后我可以从那里开始。

我很想帮忙，谢谢！

编辑：我想我应该编辑这个而不是回答......所以另一个奇怪的事情。

当我使用语法时：

import  * as firebase from '@firebase/app'

然后我得到了一个 firebase 对象，initializeApp() 函数出现在我的 firebase 对象中。（但从我读到的内容来看，这不是理想的方法。）结果如下：

但该对象中不包含“firestore”功能。即使现在有一个 initializeApp() 函数。这是否意味着我仍然没有正确安装 firebase？它没有引入我需要的所有功能？

【问题讨论】：

你安装了哪个版本？

标签： javascript firebase quasar-framework

【解决方案1】：

@ 符号通常表示特殊路径字段

尝试按以下方式导入它们：

import firebase from 'firebase/app'

对于完整指南，这是 Firebase 集成的理想示例

https://dev.to/quasar/to-the-stars-with-quasar-firebase-initial-service-structure-1fcf

【讨论】：

感谢您的回复。也许我很困惑......我想在我自己的服务器上使用我自己的 Quasar 安装中的 firebase/firestore 数据库。我不想使用 Google 的 firebase 托管服务。只是查看那个教程，它看起来像是在谷歌托管服务上设置 Quasar。
firebase 不在乎它的托管位置，只要将域添加到“受信任的”域 URL 就可以了。人们更喜欢使用托管，因为它在那里。

【解决方案2】：

有两个解决方案：

为遵守最近的更改（Firebase 版本 9.12），请使用代码：

(for Auth and Firestore services)

 import { initializeApp } from "firebase/app";
 import { getFirestore } from "firebase/firestore";
 import { getAuth } from "firebase/auth";
   const firebaseConfig = {
   apiKey: "your key xxx",
   authDomain: "your project name.firebaseapp.com",
   projectId: "your project name",
   storageBucket: "your app name.appspot.com",
   messagingSenderId: "xxx",
   appId: "xxxx",
   };
 const app = initializeApp(firebaseConfig);
 const auth = getAuth();
 const db = getFirestore();

为了向后兼容 Firebase 8（当前版本 9.12），请使用：

import firebase from 'firebase/compat/app';

import 'firebase/compat/auth';

import 'firebase/compat/firestore';

完整解释请见this link

【讨论】：