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