Next.js 和 Firebase -> TypeError：无法读取未定义的属性（读取“应用程序”）[重复]答案

【问题标题】：Next.js & Firebase -> TypeError: Cannot read properties of undefined (reading 'apps') [duplicate]Next.js 和 Firebase -> TypeError：无法读取未定义的属性（读取“应用程序”）[重复]
【发布时间】：2022-03-25 17:17:48
【问题描述】：

我想要做的是编写身份验证代码。使用 NextJS 和 Firebase。

现在问题出现在我的 firebaseClient.js 中，我收到错误“TypeError: Cannot read properties of undefined (reading 'apps')”。

代码如下所示：

import firebase from "firebase/app";

import "firebase/auth";
import "firebase/database";

const FIREBASE_CONFIG = {
  // config files from firebase here
};

export default function firebaseClient() {
  if (!firebase.apps.length) {
    firebase.initializeApp(FIREBASE_CONFIG);
  }
}

在控制台中我收到此错误： Terminal Error

这出现在 localhost:3000 上： Error Page on localhost:3000

我正在关注这个从 2020 年开始的 YT 教程 here，所以据我所知，一些导入发生了变化。

【问题讨论】：

这实际上有助于解决问题，现在错误消失了。但是，在处理可能已过时的项目时，似乎“TypeError：无法读取未定义的属性（读取'auth'）很常见。
最好检查另一个问题，如果它仍然存在，请提出一个新问题。
我在下面发布了一个答案。 YouTuber 解释了这个错误，确实是因为版本不同。所以你的链接有效，但是 YouTuber 和教程 100% 复制了我的错误/错误消息，并且按照教程，代码现在可以工作了。再次链接视频：youtube.com/watch?v=GkdHUX2Xxvk&ab_channel=DailyWebCoding

标签： javascript node.js firebase firebase-authentication next.js

【解决方案1】：

看起来你的代码有 firebase v8，而你有 firebase v9 包，它有完全不同的导入结构。当您使用 v8 遵循一些教程并安装 firebase 时，这种情况会发生很多，因此它会在默认情况下获得最新版本，即 v9

你应该怎么做：

1- 删除当前版本

npm rm firebase

2- 安装最新的 8.x

npm install firebase@8.9

【讨论】：

这在某种程度上有所帮助，错误消失了，但出现了多个其他错误。我认为你的答案背后的想法，去正确的版本可能是最好的。

【解决方案2】：

我找到了一个教程，该视频 100% 重现了您在使用过时的 v8 firebase 版本时遇到的错误。我按照教程进行操作，它确实有效，并且在将代码调整为 firebase v9 时，它再次运行。
YouTube Video

【讨论】：

这个答案有几个问题。 a）它的一部分用于代替对现有答案的评论，但在这种情况下，您可以对所述答案发表评论。（您还误用了在其他地方评论的答案，这就是我在这里提到它的原因。）b）解决方案的描述非常简短（请记住，链接的内容不算作 StackOverflow 上的答案），所以这个答案是“适应firebase v9"。 c) 您选择的格式趋于“嘈杂”，请将格式调低一点。