Firebase - Vue database integration not working

Question

I am trying integrating Firebase with Vue 4 application is currently getting the following error.

Uncaught TypeError: db__WEBPACK_IMPORTED_MODULE_1_.default.database is not a function

I am using "firebase": "^9.0.0" "vue": "^3.0.0"

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


const firebaseConfig = {
// keys
};

const app = initializeApp(firebaseConfig);

const db = getDatabase(app);

export {db}

My function call is as below

import {reactive} from 'vue';
import { ref, set, push } from "firebase/database";
import {db} from "./db"


export default {
  setup(){
    const inputUsername = ref("");
    const inputMessage = ref("");
    const state = reactive({
        username: "",
        messages:[]
    });

    const Login = () =>{
      if(inputUsername.value != "" || inputUsername.value != null){
       state.username = inputUsername.value;
       inputUsername.value = "";
      }
    }
    const SendMessage = () => {
    //   const messagesRef = db.database().ref("messages");
      if (inputMessage.value === "" || inputMessage.value === null) {
        return;
      }
      const message = {
        username: state.username,
        content: inputMessage.value
      }
      set(push(ref(db, 'messages')), message);

    //   messagesRef.push(message);
      inputMessage.value = "";
    }
    return{
    inputUsername,
    Login,
    state,
    inputMessage,
    SendMessage
    }
  }
}

I tried the following the following suggestion but it didn't work.

Thank you!

Dharmaraj · Accepted Answer · 2021-08-31 13:32:08Z

2

The new modular SDK does not use namespaces anymore. So you cannot use app.database(). You can simply export a database instance from the file where you initialize Firebase as shown below:

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

const app = initializeApp(firebaseConfig);

const db = getDatabase(app);

export {db}

Then import this wherever you need and use it:

import { ref, child, get } from "firebase/database";
import {db} from "../path/to/firebase.js"

const message = {
  username: state.username,
  content: inputMessage.value
}

set(push(ref(db, 'messages')), message);

You can learn more about the new syntax in the documentation

Uncaught TypeError: db._checkNotDeleted is not a function

This error arise due to the fact the you are importing ref from both firebase and vue. Please import Firebase's ref as fireRef.

import { reactive, ref } from "vue";
import { ref as fireRef, set, push } from "firebase/database";
import { db } from "./db";

// usage 
set(push(fireRef(db, "messages")), message);

edited Aug 31, 2021 at 13:32

answered Aug 31, 2021 at 11:21

Dharmaraj

51.3k8 gold badges67 silver badges100 bronze badges

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

9 Comments

V5NEXT Over a year ago

Thank you for the answer, but I am getting an error in this implementation. Uncaught TypeError: db._checkNotDeleted is not a function

Dharmaraj Over a year ago

@V5NXT that sounds like a different issue to me. Your code has no checkNotDeleted function

V5NEXT Over a year ago

Are you sure? its a function of the 'db' object.

Dharmaraj Over a year ago

@V5NXT can you share relevant parts of code where that's being used?

V5NEXT Over a year ago

I have updated the question with the entire component and your changes.

|

Collectives™ on Stack Overflow

Firebase - Vue database integration not working

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related