TypeError: _initFirebase__WEBPACK_IMPORTED_MODULE_4__.firebase.database is not a function

Question

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.

Dharmaraj · Accepted Answer · 2021-09-02 14:20:33Z

1

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});
}

answered Sep 2, 2021 at 14:20

Dharmaraj

51.3k8 gold badges67 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Benny Over a year ago

Thanks for the detailed solution! Works perfectly well :)!

Collectives™ on Stack Overflow

TypeError: _initFirebase__WEBPACK_IMPORTED_MODULE_4__.firebase.database is not a function

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related