React app builds locally without issue, but crashes on Heroku - reactjs

Question

I've built a React / Express app, and it runs pretty well on my local machine. The API is all hooked up, and Heroku recognises all of that, but when Heroku tries to map an array of objects to React components it fails with the following, deeply unhelpful error:
TypeError: d is null
h NoteList.jsx:130
React 8
ai
Bi
$l
Ou
xu
Su
vu
Qa
unstable_runWithPriority scheduler.production.min.js:18
React 5
Va
Qa
$a
fu
Ni
e NoteList.jsx:21
s runtime.js:63
_invoke runtime.js:293
E runtime.js:118
Babel 2
I've tried several solutions but nothing seems to work.
The repo is here, the app is live on Heroku.
The troublesome piece of code seems to be in client/src/Components/NoteList.jsx. It fetches notes from the local storage via localforage like so:
const getLocalNotes = async () => {
try {
setLoading(true)
const notes = await localforage.getItem("notes");
setLoading(false);
setNoteList(notes);
} catch (error) {
console.error(error);
}
}
...which seems to throw an error later at line 130:
{ loading ? <p>Loading</p> :
<div id="note-list">
{noteList.map(note =>
<Note
key={note.id}
id={note.id}
text={note.text}
deleteNote={deleteNote}
editNote={editNote} />
)}
</div>
}
I'm quite new to all of this -- this app is the final project of a full stack developer course -- so apologies if I've missed something obvious.

Answer 1

You can add a && condition as your noteList is coming as undefined and then you are applying map() on it, resulting in error -
Error - Cannot read property 'map' of null
Fix -
{noteList && noteList.map(x => <your code>)}