Published on

firebase.database is not a functionのエラーが起きた時の対象方法

Authors
  • avatar
    Name
    ssu
    Twitter

Firebaseのrealtime databaseを使っていて、 Uncaught TypeError: firebase.database is not a functionのエラーが起きた時の対処方法を紹介します。

とても簡単で、firebase-database.jsincludeしたら良いのです。 CDNとnpmのようなパッケージマネージャーを使っている場合の対象方法をそれぞれ下記のようになります。

CDNを使ったfirebase-database.jsのincludeの仕方

下記のようにfirebase-app.jsに加えて、firebase-database.jsをincludeしてください。

<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-database.js"></script> // これが大事!!

あとは、下記のようにしたらfirebase databaseを使うことができます。

var firebaseConfig = { apiKey: "API_KEY", authDomain: "PROJECT_ID.firebaseapp.com", databaseURL: "https://PROJECT_ID.firebaseio.com", projectId: "PROJECT_ID", storageBucket: "PROJECT_ID.appspot.com", messagingSenderId: "SENDER_ID", appId: "APP_ID", measurementId: "G-MEASUREMENT_ID", }; firebase.initializeApp(firebaseConfig); var database = firebase.database(); var ref = await database.ref('data').get() // dataというパスのデータのreferenceをawiatを使って取得 var data = ref.val() // データを取得

パッケージマネージャーを使っている場合

パッケージマネージャーを使っている場合も下記のようにしたら使えるようになります。

yarn add firebase
import firebase from '@firebase/app'; import '@firebase/database';

参考: firebase-database-is-not-a-function

参考: relatime database read-and-write#web-v8

参考: setup with npm