Next js firebase update ref._location is undefined-CodePudding

I want to push my data to firebase real time database in nextjs/react using the modular version but when I try it I get the next error :

TypeError: ref._location is undefined

Here is what i am trying :

import firebase from "firebase/compat/app";
import { app } from '../../firebase_config';
import { db } from '../../firebase_config';
import { getDatabase, set, update } from "firebase/database";
import { ref } from 'firebase/storage';
import {auth} from '../../firebase_config'
import { getAuth, onAuthStateChanged } from "firebase/auth";

onAuthStateChanged(auth, async (user) => {
  if (user) {

    const uid = user.uid;

    // push to firbase the table
    const db = getDatabase(app)
    const dbRef = ref(db, 'users/'   uid)
    update(dbRef, {displayName: "Firebase9_IsCool"}).then(() => {
      console.log("Data updated");
    }).catch((e) => {
      console.log(e);
    })  
  
    console.log('pushed to firebase')
  }
});

CodePudding user response：

To have an answer instead of a comment:

Issue is due to ref was imported from a wrong package - 'firebase/storage'

Correct import:

import { getDatabase, set, update, ref } from "firebase/database"