firebase / firebase/firebase-js-sdk

Firebase 9 Database: set & update crash when onValue is listening

Open
#6,941 22 comments 0 reactions 0 assignees View on GitHub
api: database needs-attention question v9
Dominant language
TypeScript
Stars
5.1k
Forks
1k
Avg merge
2d 21h
Merged PRs (30d)
37

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

```javascript
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:

1. Preparing my database in Firebase.js
```javascript
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 };
```

2. Importing and using firebase
```javascript
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);
},
},
};
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.