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

Answer 1

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 2

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 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 (
   ...
   )
}