firebase.database.ref is not a function error

Question

I am trying to read/write data from my database, but I always get this error:

firebase.database.ref is not a function error

Here is how I have included firebase into a project:

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

then:

<script>
var config = {
    ...
};

firebase.initializeApp(config);
</script>

The Firebase Auth works correctly. But when I do this:

function insertUser(user,name) {


     var ref = firebase.database.ref();

        ref.collection("users").doc(user.uid).set({
         uid: user.uid,
         email: user.email,
         name: name

         })
    .then(function() {
      console.log("Document successfully written!");
    })
    .catch(function(error) {
        console.error("Error writing document: ", error);
    });

}

I get error above. What am I doing wrong?

Answer 1

database() is a method so change it to the following:

 var reference =  firebase.database().ref();

Also better not to have same variable and method name.

Answer 2

I also get a database function not found issue with latest firebase library. After researching what I found is, It is due to Javascript I am importing for the database:

Previously I was using below script, Which was not working:

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

After removing -app from the script URL, it start working:

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

Hope this will be helpful for others.

Answer 3

If you are importing firestore (database) module into the some React component make sure you will import "firebase/database" and export export const firestore = app.database() in main firebase file

Firebase.tsx

import firebase from "firebase/app"
import "firebase/auth"
import "firebase/database"

const app = firebase.initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID
})

export const firestore = app.database()
export const auth = app.auth()
export default app

myComponent.tsx

import React from "react";
import {firestore} from '../../../Firebase'

export default function Home() {

  const db = firestore.refFromURL("https://<project>.firebaseio.com")
  return (
   ...
   )
}