Open
Description
Firebase 9 Database: set & update crash when onValue is listening
- Operating System version: Ubuntu 20.04.5 LTS
- Browser version: Google Chrome Version 107.0.5304.87 (Official Build) (64-bit)
- Firebase SDK version: 9.15.0
- Firebase Product: database
- Vue 3
The problem is as follows
Im creating a simple chat app with firebase real time database.
My simple app needs to write messages to a chat room and listen to any new message to render in the view.
When the App starts, it automatically send the first message saying that the user is in.
It the starts a listener with onValue, Everything goes fine.
But when sending the next message, the message doesn't reach the database, and in the console I see the following stack
runtime-core.esm-bundler.js:220 Uncaught TypeError: newChildren.insert is not a function
at IndexMap.ts:147:30
at map (obj.ts:50:21)
at Proxy.addToIndexes (IndexMap.ts:115:24)
at Proxy.updateImmediateChild (ChildrenNode.ts:156:38)
at IndexedFilter.updateChild (IndexedFilter.ts:94:19)
at viewProcessorApplyUserOverwrite (ViewProcessor.ts:494:51)
at viewProcessorApplyOperation (ViewProcessor.ts:103:22)
at viewApplyOperation (View.ts:213:18)
at syncPointApplyOperation (SyncPoint.ts:107:9)
at syncTreeApplyOperationHelper_ (SyncTree.ts:730:9)If I remove the onValue listener, all sent messages reach my database. although I cant get the updates by then.
Steps to reproduce:
- Preparing my database in Firebase.js
import { initializeApp } from "firebase/app";
import {getDatabase, ref, onValue, push, set, update, get, } from "firebase/database";
const config = {
XXXXXXXXXX
};
const firebase = initializeApp(config);
const database = getDatabase(firebase);
export { database, ref, onValue, push, set, update, get };- Importing and using firebase
import { database, ref, onValue, push, set, update } from "../Firebase";
import router from "../router";
export default {
name: "Chat",
props: ["roomid", "roomname", "nickname"],
data() {
return {
message: "",
chats: [],
errors: [],
offStatus: false,
chatsRef: ref(database, "chatrooms/" + this.roomid + "/chats"),
};
},
created() {
this.sendMessage(this.nickname + " amejiunga katika redio.", "join");
onValue(this.chatsRef, (snapshot) => {
if (snapshot.exists()) {
this.chats = [];
snapshot.forEach((doc) => {
let item = doc.val();
item.key = doc.key;
this.chats.push(item);
});
}
});
},
unmounted() {
this.exitChat();
},
methods: {
onSubmit(evt) {
evt.preventDefault();
this.sendMessage(this.message, "newmsg");
this.message = "";
},
sendMessage(message, type = "newmsg") {
const newPostKey = push(this.chatsRef).key;
// const updates = {};
// updates[newPostKey] = {
// type: type,
// user: this.nickname,
// message: message,
// sendDate: Date(),
// };
set(ref(database, "chatrooms/" + this.roomid + "/chats/" + newPostKey), {
type: type,
user: this.nickname,
message: message,
sendDate: Date(),
});
// update(this.chatsRef, updates);
},
exitChat() {
this.sendMessage(this.nickname + " ametoka katika redio.", "exit");
this.offStatus = true;
router.go(-1);
},
},
};