TypeError: _initFirebase__WEBPACK_IMPORTED_MODULE_4__.firebase.database is not a function

I’m trying to push new data to my Firebase Realtime Database.

I have this initFirebase.js:

import * as firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/database'

const firebaseConfig = {
    apiKey: "AIzaSyBhiHbrO2qUvGDmGN3iX5u-SlpRK_EPlzU",
    authDomain: "table-app-e64c3.firebaseapp.com",
    projectId: "table-app-e64c3",
    storageBucket: "table-app-e64c3.appspot.com",
    messagingSenderId: "102169979497",
    appId: "1:102169979497:web:c8dc8170bd6ce50f4850f8",
    measurementId: "G-6RC7ZQ1177"
  };

  function initFirebase() {
      if (!firebase.getApps.length){
          firebase.initializeApp(firebaseConfig)
      }
  }
  
  initFirebase()

  export { firebase }

And I have this App.js (I pasted the only part that is relevant):

import { firebase } from "./initFirebase"
const App = () => {
//...

  const handleAddFormSubmit = (event) => {
    event.preventDefault()
    
    const listRef = firebase.database().ref("Lists")
    const newListRef = listRef.push()
    newListRef.set({
        //Some Data to insert
      })
  }

//...
}

export default App;

But I keep getting this error:

TypeError: _initFirebase__WEBPACK_IMPORTED_MODULE_4__.firebase.database is not a function

handleAddFormSubmit

  43 |    setContacts(newContacts)
  44 | 
  45 |    //Represent a new record in the database
> 46 |    const listRef = firebase.database().ref("Lists")
     | ^  47 |    const newListRef = listRef.push()
  48 |    newListRef.set({    

Everything breaks in the above function that I’ve pasted handleAddFormSubmit & I fail again and again to solve this problem. I’m new with React & Firebase and I’ll Appreciate any help or direction to the solution. Thanks.

Solved, Edit: Full documentation of Modular SDK (v9) (with comparison to v8) can be found here.

Answer

Apparently you have the new Modular SDK (v9) installed which does not have the firebase.database() syntax but uses a new syntax. If you want to keep rest of the code as it is, then change your imports to compat libraries:

import firebase from 'firebase/compat/app'
import 'firebase/compat/auth'
import 'firebase/compat/database'

I’d recommend using the new Modular syntax as it has benefits of tree-shaking. You can try refactoring your code to this:

import { initializeApp } form "firebase/app"
import { getAuth } from "firebase/auth";
import { getDatabase } from "firebase/database"

const app = initializeApp(firebaseConfig)

const auth = getAuth(app)
const db = getDatabase(app)

export { auth, db }

Then in app.js:

import { auth, db } from "./initFirebase"
import { ref, push, set } from "firebase/database"

const handleAddFormSubmit = (event) => {
  event.preventDefault()
    
  const listRef = ref(db, 'Lists');
  const newItemRef = push(listRef);
  set(newPostRef, {..data});
}