Issues with local deploy of React Notes App

[torpid sapphire]

Hi everyone!

I made sure to look around other threads here, got a few pointers from StackOverflow, and in general googled my way around, but didn't find anything specific enough regarding the issues I'm going to share here.

I just want to have a local deploy of the Notes App from #react-basics in order to then customize it a little, push it to GitHub and make it part of my portfolio. I just downloaded the code as seen here, which was working on the scrim (but do notice that, upon clicking on refresh and trying to edit anything it gives pretty much the same error you will see on my attached screenshots): https://scrimba.com/learn/frontend/debouncing-updates-part-3-co3224f249bca482bd4d12690?a=14540.0.8.L22_20

I've seen some references to previous issues with VS Code and local envs, but those seem to have happened with Webpack and I'm running Vite, as the updated course instructs.

Now, after running npm run dev and navigating to my localhost address I can see the initial screen of the app but it quickly blanks out and the browser's dev console throws out a bunch of errors as seen on the attached images.

So it all seems to start breaking down from App.jsx line 52 which is the if() on the following useEffect hook:

useEffect(() => { const timeoutId = setTimeout(() => { if (tempNoteText !== currentNote.body) { updateNote(tempNoteText) } }, 500) return () => clearTimeout(timeoutId) }, [tempNoteText])

That missing currentNote object comes from:

const currentNote = notes.find(note => note.id === currentNoteId) || notes[0]

Which in turn calls out state variable const [notes, setNotes] = useState([])

It is all in the scrim linked above for more reference, but anyway I wonder if this has anything to do with Firebase? Curiously enough, both my localhost tab AND the Scrimba tab where I had the scrim open would randomly crash as well when trying to refresh my local deploy.

Thanks!

[brave gate]

Debouncing is an interesting topic. I didn't realize Bob started going over that in the notes app. I'll have to revisit.

Try optional chaining:

if(tempNoteText !== currentNote?.body){
   // rest of code
}

If that doesn't work, create another if statement checking to make sure that currentNote.body actually exists.

Also, the find method for an array will return the first element in an array that matches. So the current Note may be undefined

[lime slate]

@brave gate has the right solution in my opinion.

You should also include the currentNote into your dependency list otherwise it could cause some unexpected problems.

[torpid sapphire]

Hey @brave gate && @lime slate, thanks for the input! I'm sitting back down in front of my laptop to continue working on this. Will get back to you with results. Thanks again!

[lime slate]

Good luck! 🙂

[torpid sapphire]

Ok, first try didn't work. That additional if statement, should it wrap the existing one?

[lime slate]

just update the existing if:

if (tempNoteText !== currentNote?.body) { }

question mark after currentNote

It is called optional chaining

a currentNode can be undefined, if you try to access a property on it such as body, the application will throw an error.

using optional chaining you can avoid the error. You are basically telling the compiler that only try to access the property on this value if the value is defined

[torpid sapphire]

Ok, I updated the if as suggested, I was just asking about the second suggestion by @brave gate of creating an additional if statement to check if currentNote.body exists. I did that, like this:
useEffect(() => { const timeoutId = setTimeout(() => { if (currentNote.body) { if (tempNoteText !== currentNote?.body) { updateNote(tempNoteText) } } }, 500) return () => clearTimeout(timeoutId) }, [tempNoteText, currentNote])
But now I get a different set of errors (at least the first state of the app does render, but it fails as soon as I click on the "Create one now" button.
One thing that I find particularly puzzling is that trying to run this is making some of my browser's tabs to randomly crash (I use Firefox). Wonder if an add-on is interfering here.
As for the optional chaining, yes, I tried that one first, but to no avail. That's why I tried the additional if statement as seen above.

[brave gate]

Would you be able to show all the code you have?

[torpid sapphire]

Sorry for the delayed response, I had to go away for a while.

All the code I have is essentially the same as in the scrim I shared on my OP, except for the changes you suggested. However, let me see how I can share everything anyway.

[brave gate]

I'm on mobile. It doesn't play well. Give me a minute and I will see.

[torpid sapphire]

That's OK

[brave gate]

You have to check for currentNote to be sure that currentNote.body is present:

if(currentNote){
      if (tempNoteText !== currentNote.body) {
           updateNote(tempNoteText)
      }
}

This will get rid of your error. because currentNote is undefined for 2 consecutive rerenders before it is defined. I don't really know how this may effect your debouncing, but I imagine it should still work the same.

[torpid sapphire]

OK, let me try that out, I had it as if (currentNote.body){...}

[brave gate]

the error is telling you that it cannot access a property body of undefined which basically means that you are trying to access undefined.body which is why you are getting the error.

[torpid sapphire]

Ok, I made the change and switched to MS Edge with all add-ons deactivated. This is the new set of errors:

[brave gate]

@torpid sapphire could you send me a screen shot of your Editor.jsx file?

It just means we are making progress lol! But I do believe I know the issue that you are having

[torpid sapphire]

Sure!

[brave gate]

@torpid sapphire Yep...

remove:

const ReactMde = R.default

that is no longer needed and why you are getting the new error

Change:

import R from "react-mde"

To:

import ReactMde from "react-mde"

that should solve the new error

That was some scrimba magic behind the scenes... it will cause your code to break locally.

[torpid sapphire]

Oh c'mon... it works now!

[brave gate]

@torpid sapphire perfect!

The Pork bbq sounded pretty good lol I'm going to go get a pizza now because it got me hungry

[torpid sapphire]

Bob might have warned about it, but I watched those lessons some two weeks ago and it wasn't until yesterday that I finished something else and decided to deploy this project locally, so I might've forgotten about it...

Thanks a lot @brave gate! Really appreciate your help.

[brave gate]

He redid the notes app since the last time I tried it. But never tried locally. I'm sure he mentions the breaking change somewhere though... we break and we learn lol

[torpid sapphire]

As for the pork bbq thing, well, glad I had some pork roast yesterday 😛

[brave gate]

LOL now your just rubbing it in! Glad I could help!

[torpid sapphire]

PS: here is where he explained it ---> https://scrimba.com/learn/frontend/updating-to-vite-cobbe4cb3bc9ff04467e56205

[lime slate]

Give some love to @brave gate ❤️ 😄

and send him some of the leftover pork 🐷