Uncaught ReferenceError: Firebase is not defined

Question

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

Uncaught ReferenceError: Firebase is not defined

这是教程的 link，我在 JavaScript 控制台中尝试运行的代码片段是：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");
});

Answer 1

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

<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>
  </head>

那就解决问题了。

Answer 2

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

希望这对您有所帮助。

Answer 3

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

这是适合您的相关片段

Answer 4

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

之前：

    var ref = new Firebase('url');

现在：

    firebase.initializeApp(config);

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

Answer 5

<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>

Answer 6

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

Answer 7

如果您像我一样使用 Firebase 托管（并使用 <script src="/__/firebase/7.14.5/firebase-app.js"></script>），那么如果您尝试在没有运行ning firebase serve。

Answer 8

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

，之后我们必须包含所有相关的 api 代码。这是可用的

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

Answer 9

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

1.) 使用 CLI！！！这太容易了！（只需 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 交互的任何代码

您的项目应如下所示：

Answer 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 通过全局对象提供的默认设置是安全的。

而且，将Javascript代码全部写在APP.js中并访问firebase对象和方法的方法也是一个不错的选择，但对于较大的项目来说非常痛苦。由于您需要重构您的代码 bundle/include 到一个文件 App.js.

Answer 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>

乐于助人

Uncaught ReferenceError: Firebase is not defined

Uncaught ReferenceError: Firebase is not defined

javascript

firebase

firebase-realtime-database