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

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

とても簡単で、firebase-database.jsをincludeしたら良いのです。 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