[解決済み] firebase.database は関数ではありません。
質問
Firebaseの旧バージョンから最新バージョンにアップグレードしようとしています。
ionicプロジェクト
. 私は次のようにしました。
これ
のチュートリアルを参考に、アップグレードを行いました。このページのステップ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;
}
解決方法は?
Ionicで遭遇したのですが、最新のFirebase Clientを使用する際に、すべてをインクルードしていなかったことが判明しました。もし、Firebaseを
firebase-app
このように Firebase をインクルードする場合、Database と Auth はバンドルされないので、別途必要である。
を追加します。
index.html
をインクルードした後に
firebase-app.js
<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を使用する必要はありません。 バウワー (おそらくIonicで推奨される方法)または NPM Browserifyの場合。
// Browserify Setup
var firebase = require('firebase/app');
require('firebase/auth');
require('firebase/database');
以下のスニペットは Firebase ウェブ セットアップ ドキュメント
<ブロッククオート必要な機能だけを搭載することで、アプリに使用するコード量を削減することができます。個別にインストール可能なコンポーネントは
<ブロッククオート
firebase-app - core firebase client (必須).
firebase-auth - Firebase 認証 (オプション)。
firebase-database - Firebase Realtime Database (オプション)。
firebase-storage - Firebase Storage (オプション)。
CDNから、必要なコンポーネントを個別にインクルードします(最初にfirebase-appをインクルードします)。
関連
-
[解決済み】jquery $.ajaxオブジェクトのresponseJSONプロパティを取得する方法 [重複]。
-
[解決済み】Google Conversionsが動作しない - スクリプトが読み込まれない
-
[解決済み】Jestが予期しないトークンに遭遇した
-
[解決済み】Babel NodeJS ES6: SyntaxError: 予期しないトークンのエクスポート
-
[解決済み】react router v^4.0.0 Uncaught TypeError: 未定義のプロパティ'location'を読み取れない
-
[解決済み] とは何ですか! (not not)演算子とは何ですか?
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] JavaScriptでNULL、未定義、空白の変数をチェックする標準的な関数はありますか?
-
[解決済み] URLを新しいタブで開く(新しいウィンドウではない)
-
[解決済み】JavaScriptの関数にデフォルトのパラメータ値を設定する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】JavaScriptで':'(コロン)は何をするのか?
-
[解決済み】JavaScriptのisset()に相当するもの
-
[解決済み】webpack: モジュールが見つかりません。Error: 解決できない(相対パスで)
-
[解決済み】BootstrapのCollapseが折りたたまれない
-
[解決済み】SyntaxError: 'import' と 'export' は 'sourceType: module' とだけ表示されるかもしれない - Gulp
-
[解決済み】Javascript - ERR_CONTENT_LENGTH_MISMATCH
-
[解決済み】未定義のプロパティ 'forEach' を読み取ることができない
-
[解決済み】Vueが定義されていない
-
[解決済み] [Solved] Uncaught Invariant Violation: 前のレンダリング中よりも多くのフックをレンダリングする
-
[解決済み] Uncaught (in promise) TypeError: フェッチに失敗してCorsエラー