Estoy tratando de integrar Firebase con la aplicación Vue 4 y actualmente aparece el siguiente error.
TypeError no detectado: db__WEBPACK_IMPORTED_MODULE_1 _.default.database no es una función
Estoy usando "base de fuego": "^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}Mi llamada de función es la siguiente
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 } } }Intenté lo siguiente, la siguiente sugerencia , pero no funcionó.
¡Gracias!
El nuevo SDK modular ya no usa espacios de nombres. Entonces no puedes usar app.database() . Simplemente puede exportar una instancia de base de datos desde el archivo donde inicializa Firebase como se muestra a continuación:
import { initializeApp } from "firebase/app"; import { getDatabase } from "firebase/database"; const app = initializeApp(firebaseConfig); const db = getDatabase(app); export {db}Luego importa esto donde lo necesites y úsalo:
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);Puede obtener más información sobre la nueva sintaxis en la documentación .
TypeError no detectado: db._checkNotDeleted no es una función
Este error surge debido al hecho de que está importando ref tanto de firebase como de vue . Importe la ref de Firebase como 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);