未捕获的 ReferenceError：未定义 Firebase答案

【问题标题】：Uncaught ReferenceError: Firebase is not defined未捕获的 ReferenceError：未定义 Firebase
【发布时间】：2016-04-30 07:50:56
【问题描述】：

我正在尝试按照在 firebase 中设计数据库的教程进行操作，但在 JavaScript 控制台中出现以下错误：

Uncaught ReferenceError: Firebase 未定义

这是教程的链接，我试图在 JavaScript 控制台中运行的代码 sn-p 是：https://www.firebase.com/blog/2014-11-04-firebase-realtime-queries.html

var ref = new Firebase("https://dinosaur-facts.firebaseio.com/dinosaurs");
ref.orderByChild("height").on("child_added", function(snapshot) {
  console.log(snapshot.key() + " was " + snapshot.val().height + " meters tall");
});

【问题讨论】：

这意味着您尚未在页面中包含 Firebase JavaScript 库。我建议您不要从博客文章开始，而是从 5-minute interactive tutorial 开始。它解释了在第一步中要添加的内容。
非常感谢，我根据您的建议添加了以下行：src='cdn.firebase.com/js/client/2.2.1/firebase.js' 但我仍然遇到同样的错误。另外，如果代码执行成功，我应该期待什么？
按照我链接的教程，您将拥有一个小型聊天应用程序。如果您在本地设置中遇到问题，请显示您在在您的问题中 使用的准确、完整但最少的代码（其下方有一个“编辑”链接）。你现在的代码是正确的，只是不完整。
抱歉，不走运。我仍然得到错误。
如果我省略了<script 标签，我只能得到那个错误。您必须包含我们可以重现您的问题的最少步骤。

标签： javascript firebase firebase-realtime-database

【解决方案1】：

有一个关于如何迁移到新版本的指南。
您可以在以下位置找到它：https://firebase.google.com/support/guides/firebase-web

这是给你的相关sn-p

【讨论】：

当我添加此代码时，我得到“ReferenceError: firebase is not defined”。你从哪里得到“firebase”变量？
@Jim 您是否将firebase.js 添加到您的html 文件中？
我尝试通过 script 标签、bower install 和 npm install 添加 firebase.js。我总是得到 firebase is not defined 错误。 :( 检查这个问题：github.com/firebase/angularfire/issues/362
@Jim 您可以在以下位置关注我的代码：github.com/GuyMograbi/mograblog/blob/master/src/scripts/… - 我使用的是 3.2.1 版。您必须使用正确的版本作为他们的 API 更改。

【解决方案2】：

在标题中，包括以下内容：

<head>
    <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
    <link rel='stylesheet' type='text/css' href='/resources/tutorial/css/example.css'>
  </head>

这样就可以解决问题了。

【讨论】：

这是新脚本<script src="https://www.gstatic.com/firebasejs/4.3.0/firebase.js"></script>

【解决方案3】：

如果您使用的是 firebase web api，那么在 body 标签中首先包含核心 firebase SDK 非常重要，这个 SDK 提供了 firebase 可访问性。如图所示。

,之后我们必须包含所有相关的api代码。哪个可用

这些对你有帮助，它会很好地解决你的问题，即没有定义firebase，你不需要添加任何其他脚本

【讨论】：

【解决方案4】：

如果您像我一样使用 Firebase 托管（并使用 <script src="/__/firebase/7.14.5/firebase-app.js"></script>），那么如果您尝试在本地测试而不运行 firebase serve，则会遇到此错误。

【讨论】：

【解决方案5】：

我有 firebase.util lib 的问题，正如 Rodrigo 所说，我认为是版本的问题。

之前：

    var ref = new Firebase('url');

现在：

    firebase.initializeApp(config);

由于 firebase 对象的定义不同，它找不到它。就我而言，我需要更新库以与 firebase 3.0 版兼容。我不认为使用旧库是一个好主意，脱离步调是好的，但必须将代码更新到版本 3。如果还没有人这样做，可能是我们为社区做出贡献的机会。

【讨论】：

【解决方案6】：

<head>
    <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
    <link rel='stylesheet' type='text/css' href='/resources/tutorial/css/example.css'>
  </head>

【讨论】：

【解决方案7】：

我在通过“ionic add firebase”安装 firebase 时遇到了同样的问题。这添加了 firebase 版本 3.2.0。然后，在寻找答案时，我尝试了 2.4.2 版本的 cdn，错误消失了，所以我发现通过 ionic 下载的版本是导致错误的原因，所以我下载了 2.4.2 版本，现在它可以工作了。

希望这会有所帮助。

【讨论】：

【解决方案8】：

如果有人在 2021 年 7 月遇到此问题，这是我的解决方案：

1.) 使用命令行！！！这容易多了！！！（就做npm install -g firebase-tools

2.) CD 到您的首选目录并执行firebase login

3.) 登录到您的 Firebase 帐户。

4.) 执行firebase init 并完成所有步骤

5.) 在您的 public/ 文件夹中创建一个 app.js 文件

6.) 添加此代码：

document.addEventListener('DOMContentLoaded', event => {
        const app = firebase.app();
});

现在你应该一切都好，只要确保在 EventListener 中编写任何与 FireBase 交互的代码

您的项目应如下所示：

【讨论】：

【解决方案9】：

从 firebase 创建连接变量。

con = {
    "apiKey": "your key",
    "authDomain": "example.firebaseapp.com",
    "databaseURL": "https://example.firebaseio.com/",
    "projectId": "example",
    "storageBucket": "example.appspot.com",
    "messagingSenderId": "id"
};

使用这个初始化firebase

firebase.initializeApp(con);

【讨论】：

【解决方案10】：

我也面临同样的问题。问题出在我的 api.js 文件上。

const api = liveAPi;

var firebaseConfig = {
  apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  measurementId: "xxxxxxxxxxxxx"
};
  // Initialize Firebase
firebase.initializeApp(firebaseConfig);

它清楚地表明它没有访问 firebase 对象。 Firebase建议通过<script src="https://www.gstatic.com/firebasejs/8.7.0/firebase-app.js">添加js文件，

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.7.0/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.7.0/firebase-analytics.js"></script>

<script>
  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      measurementId: "xxxxxxxxxxxxx"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>

但我正在访问 js 文件中的 firebase 对象。

所以要解决这个问题：在 HTML 中包含 api.js 文件之前将它们添加到 firebase 对象，如下所示：-

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

<script src="../js/fetch/api.js"></script>

这将使 api.js 能够访问 firebase 对象。

还有一些其他方法与访问 javascript 文件中的这些 firebase 对象有关，但 firebase 通过全局对象提供的默认设置是安全的。

而且，在 APP.js 中编写所有 Javascript 代码并访问 firebase 对象和方法的方法也是一个不错的选择，但对于大型项目来说非常痛苦。由于您需要重构代码并将其捆绑/包含到一个文件 App.js 中。

【讨论】：

【解决方案11】：

答案是将它添加到html文件中的head标签我认为这应该可以解决问题添加 Firebase SDK：https://firebase.google.com/docs/database/web/start?authuser=0

如果没有解决，请访问此站点：https://firebase.google.com/docs/database/web/read-and-write?authuser=0

<head>
    <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
    <link rel='stylesheet' type='text/css' href='/resources/tutorial/css/example.css'>
  </head>

乐于助人?

【讨论】：