We Keep Coding

How can I fix my firestore database setup error?

i'm trying to setup this event booking webapp from a source code that I downloaded. When i first set it up it throws me this error:
db.js:3 Uncaught TypeError: Cannot read properties of undefined (reading 'doc')
at Object.next (db.js:3:47)
at next (database.ts:1973:20)
at async_observer.ts:51:11
I searched the error to find a solution for this issue, but I couldn't find any. I'd greatly appreciate it if someone could help me with this issue. I have provided my code below. Thanks!
db.collection("events").onSnapshot((snapshot) => {
// Handle the latest event
const newestEvent = snapshot.docChanges()[0].doc.data();
const id = snapshot.docChanges()[0].doc.id;
showLatestEvent(newestEvent, id);
// shift the latest event element
snapshot.docChanges().shift();
snapshot.docChanges().forEach((event) => {
showEvents(event.doc.data(), event.doc.id);
});
});

Most likely snapshot.docChanges() is an empty array, so snapshot.docChanges()[0].doc.data() then fails. You'll want to check for an empty result set before accessing a member by its index like that.

Why does my code only throw an error when debugger is not attached?

Have you ever had such a problem? Your code works with debugger on but when it is off it doesn't work??
So above I have 2 links to screen recordings, showing how when debugger is active my code works but when not it throws an error. If anyone is brave enough to look at my codepen of the issue I would be grateful. (Debugger doesn't work in codepen but if you were to take the code and put it in your editor you will see that it workers when debugger is on.) https://codepen.io/oliver-saintilien/pen/jOrQBLv
stackoverflow says that I MUST include code whenever I use a codepen link, however the code is a bit involved. So I will just post the code where there error occurs, but just remember it actually works if I have debug attached.
//Uses path to return nested object
const traverse = (obj, path) => {
console.log(`1 time`);
return path.split(".").reduce((object, key) => object[key], obj);
};

For some reason by changing
let parentFolder = this[0].outerText.replace(/\s/g, '')
to
let parentFolder = this[0].text.replace(/\s/g, '')
causes it to work now without debugger on although I do not know why, but hey it works. Just to be clear, my using the method .text instead of .outerText is what made the difference.

Typescript tuple lint error not consistent [vscode]

Following along with this great video on how to use types in typescript.
But I notice an inconsistency with my text editor's linting and the video.
The video shows like this
And mine shows like this
If I change the code, so it should not lint any errors, I still get the errors
What is going on here?
Don't know if this matter but I'm on typescript 3.3.x and the video is on 3.1.x

The video declared the array as follows:
const arr: myList = []
And you declared it like that:
const arr: myList[] = []

React-Native Simple Store Error: Unable to load RocksDB, SQLite, or AsyncLocalStorage

When running a basic app that uses react-native-simple-store I get the following error (the same as this unsolved question):
undefined is not an object (evaluating 'RCTAsyncStorage.multimerge')
<unkown>
AsyncStorage.js:325:21
...
Digging into AsyncStorage.js I find that the issue is here:
// Not all native implementations support merge.
if (!RCTAsyncStorage.multiMerge) {
delete AsyncStorage.mergeItem;
delete AsyncStorage.multiMerge;
}
RCTAsyncStorage is not undefined. The attempt to define RCTAsyncStorage comes at the beginning of the same file.
const NativeModules = require('../BatchedBridge/NativeModules');
// Use RocksDB if available, then SQLite, then file storage.
const RCTAsyncStorage = NativeModules.AsyncRocksDBStorage ||
NativeModules.AsyncSQLiteDBStorage ||
NativeModules.AsyncLocalStorage;
Finally, I checked NativeModules.AsyncRocksDBStorage, NativeModules.AsyncSQLiteDBStorage, and NativeModules.AsyncLocalStorage—surely enough, all of them were undefined. The file from which they are supposed to be loaded (NativeModules) is a bit difficult to understand, so I stopped tracing there.
Please let me know if you know what I could be doing wrong!

Why are my locations undefined and display not updating?

I am having some issues with a class project. Every thing was working fine and dandy up until the current part we are on. Basically, we had to add prototypes and cases to move to each location. Now my code will not work, and the teacher is about as helpful as a pet rock. I have two parts to my code, the html (which has part of the code including items and such) and the .js file that includes the locations.
I have created a repository on Github so it is easily accessible to all who want to help. At this point it is too late to submit to my professor, but I am curious on what I did wrong.
https://github.com/EmeraldX/Project-Help/tree/master
The main and directions.js are the files that I am currently working with.
Thanks!
Update: Okay, so it's still not working, and when I use Chrome's console it just tells me that:
function updateDisplay( message ) {
var textArea = document.getElementById("introduction");
textArea.value = message + "\n\n" + textArea.value;
Cannot read property 'value' of null

I tried opening your html page and js using firefox, and used the firebug consol to see if anything was wrong.
It looks like you have an ) missing in your js:
SyntaxError: missing ) after argument list directions.js:7:145
And it was right:
locations[2] = new Location(2,"Lake","A large lake that is formed by a river flowing from the East.",
new Item(1,"Fish","An old rotting fish.");
is missing a ')'
After correcting it, it appear that you miss this ) line 7, 9, 13 and 14.
Then a new error pop up:
ReferenceError: Item is not defined directions.js:7:2
This can be corrected by calling your direction.js AFTER you js script in main.html.
Hope it can help