firebase.database 不是函数

Posted

技术标签:

【中文标题】firebase.database 不是函数【英文标题】：firebase.database is not a function 【发布时间】：2016-11-09 23:08:15 【问题描述】：

我正在尝试从早期的 firebase 版本升级到我的 ionic project 中的最新版本。我按照this 教程进行升级。在此页面的第 4 步中，我被困在最后一条语句 firebase.database().ref(); 上。

错误信息

TypeError: firebase.database is not a function

下面是我的代码。请帮忙。

...

// Initialize Firebase
this.config = 
    apiKey: "some-api-key",
    authDomain: "myapp.firebaseapp.com",
    databaseURL: "https://myapp.firebaseio.com",
    storageBucket: "project-somenumber.appspot.com",
;

...

this.authWithOAuthPopup = function(type) 
    var deferred = $q.defer();
    console.log(service.config);    // ---> Object apiKey: "some-api-key", authDomain: "myapp.firebaseapp.com", databaseURL: "https://myapp.firebaseio.com", storageBucket: "project-somenumber.appspot.com"
    firebase.initializeApp(service.config);
    console.log(firebase);  // ---> Object SDK_VERSION: "3.0.5", INTERNAL: Object
    service.rootRef = firebase.database().ref(); //new Firebase("https://rsb2.firebaseio.com"); ---> I am getting error on this line "TypeError: firebase.database is not a function"
    service.rootRef.authWithOAuthPopup(type, function(error, authData) 
        if (error) 
            service.authError = error;
            switch (error.code) 
                case "INVALID_EMAIL":
                    console.log("The specified user account email is invalid.");
                    break;
                case "INVALID_PASSWORD":
                    console.log("The specified user account password is incorrect.");
                    break;
                case "INVALID_USER":
                    console.log("The specified user account does not exist.");
                    break;
                default:
                    console.log("Error logging user in:", error);
            
            deferred.resolve(service.authError);
         else 
            service.authData = authData;
            console.log("Authenticated successfully with payload:", authData);
            deferred.resolve(service.authData);
        
        return deferred.promise;
    );
    return deferred.promise;


var service = this;

更新

添加最新的数据库后这个问题就解决了。

在这里更新我的代码

this.authWithOAuthPopup = function(type) 
    var deferred = $q.defer();
    console.log(service.config);
    firebase.initializeApp(service.config);
    console.log(firebase);
    service.rootRef = firebase.database(); //.ref(); //new Firebase("https://rsb2.firebaseio.com");

    var provider = new firebase.auth.FacebookAuthProvider();
    firebase.auth().signInWithRedirect(provider);
    firebase.auth().getRedirectResult().then(function(result) 
        if (result.credential) 
            // This gives you a Facebook Access Token. You can use it to access the Facebook API.
            var token = result.credential.accessToken;
            console.log(result);
            // ...
        
        // The signed-in user info.
        var user = result.user;
    ).catch(function(error) 
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // The email of the user's account used.
        var email = error.email;
        // The firebase.auth.AuthCredential type that was used.
        var credential = error.credential;
        // ...
    );
    return deferred.promise;

【问题讨论】：

【参考方案1】：

首先，确保你正在使用

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

Firebase authWithOAuthPopup 在新版本中发生了一些变化。

现在您不再使用 ref 来调用身份验证方法。你应该使用firebase.auth()insted。

var auth = firebase.auth();
var provider = new firebase.auth.TwitterAuthProvider();
auth.signInWithPopup(provider).then(function(result) 
  // User signed in!
  var uid = result.user.uid;
).catch(function(error) 
  // An error occurred
);

【讨论】：

doc 建议对移动设备使用重定向方法。因此，我可以使用重定向方法使用 facebook 进行身份验证，但这会重新加载我的网页（目前正在 chrome 上测试 ionic 应用程序）并且我无法获取有效负载详细信息。我已经更新了上面的代码【参考方案2】：

我在使用 Ionic 时遇到了这个问题，结果发现我在使用最新的 Firebase 客户端时并没有包含所有内容。如果您已将 Firebase 包含为 firebase-app，则需要单独要求数据库和身份验证部分，因为以这种方式包含 Firebase 时它们不会捆绑在一起。

在您添加firebase-app.js 后，将以下内容添加到您的index.html

<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>

显然您不需要使用 CDN，您可以使用 bower（可能是 Ionic 的首选方式）或 NPM 和 Browserify。

// Browserify Setup
var firebase = require('firebase/app');
require('firebase/auth');
require('firebase/database');

以下片段来自Firebase Web Setup Docs

您可以通过仅包含您需要的功能来减少您的应用使用的代码量。可单独安装的组件有：

firebase-app - 核心 firebase 客户端（必需）。 firebase-auth - Firebase 身份验证（可选）。 firebase-database - Firebase 实时数据库（可选）。 firebase-storage - Firebase 存储（可选）。

从 CDN 中包含您需要的各个组件（首先包括 firebase-app）

【讨论】：

这太疯狂了，因为 firebase (firebase.google.com/docs/web/setup) 的官方文档目前没有显示到 gstatic.com/firebasejs/6.1.0/firebase-database.js 的链接他们只是说，使用适当的库。如果您在 CDN 部分下查看 firebase-database.js 未列出，但这是您需要的实时数据库。【参考方案3】：

聚会有点晚了，但如果有人想知道 angular（或 Ionic 4）的语法，只需将其添加到您的 .module.ts 文件中（注意，正如 peterb 提到的，/database 导入） 

import  AuthService  from './auth.service';
import  AngularFireAuthModule  from 'angularfire2/auth';
import  AngularFireDatabaseModule  from 'angularfire2/database';

@NgModule(
  imports: [
    AngularFireAuthModule,
    AngularFireDatabaseModule,
    AngularFireModule.initializeApp(environment.firebase),
  ],
  providers: [
  ]
)

【讨论】：

【参考方案4】：

在@angular/firebase 5.1.2 上也遇到过这个问题，当更新@angular/cli 和所有依赖项到最新版本时解决了。

【讨论】：

【参考方案5】：

我也有同样的错误-firebase.database is not a function-但是不同的情况你只需要添加

上面还有包含 Firebase 配置的 javascript 链接。

您也可以尝试在脚本中使用 defer 属性，因为在加载页面元素之前它不会加载脚本。

【讨论】：

【参考方案6】：

对于在 React-native 中面临类似错误（this._database.native.on 不是函数）的人 -

    运行 pod install - 添加 firebase 新服务后（数据库/身份验证 ...） 终止 Metro 捆绑器并使用“npx react-native start”重新启动它 运行“npx react-native run-ios”

这将创建一个新的构建，并且错误应该消失了。

参考：https://github.com/invertase/react-native-firebase/issues/3379

【讨论】：

【参考方案7】：

我通过在构造函数中给出 url 解决了这个问题 firebase.database('https://123.firebaseio.com')

【讨论】：

【参考方案8】：

使用

var firebase = require('firebase/app');
require('firebase/database');

【讨论】：

【参考方案9】：

您需要导入最新版本的 firebase-database 。你可以在cndjs上找到

【讨论】：

【参考方案10】：

npm install --save firebase

然后：

require("firebase/database");

您需要通过require() 的方式添加您正在使用的所有firebase 产品，如上所示。

【讨论】：

以上是关于firebase.database 不是函数的主要内容，如果未能解决你的问题，请参考以下文章

Firebase.database不是JavaScript中的函数

app.default.firebase 不是函数错误

Function.database 和 Firebase.database 有啥区别？啥时候使用一个而不是另一个？

Android Kotlin firebase.database.DatabaseException：在类上找不到要序列化的属性

目标 URI 不存在：'package:firebase_database/firebase_database.dart';

Firebase 从函数返回输出