Cannot read properties of undefined (the general state is undefined) - reactjs

Question

I just finished a small project and I tried to publish it on Vercel, the project works without errors locally, but on the server I get the error: "Cannot read properties of undefined (reading 'notes')", apparently not It recognizes the state that I have in my application, this would be my useNotes file:
import { useContext } from "react";
import { NotesContext } from "../context/NotesContext";
export const useNotes = () => {
const { notestate, toggleNote, addNote, changeState, handleDeleteNote } = useContext(NotesContext);
const { notes } = notestate;
return {
noteGeneral: notestate,
notes: notes,
notinteresting: notes?.filter(note => !note?.interesting).length,
interesting: notes?.filter(note => note?.interesting === true).length,
lisInteresting: notes?.filter(note => note?.interesting === true),
listNotInteresting: notes?.filter(note => note?.interesting === false),
toggleNote,
addNote,
changeState,
handleDeleteNote
}
}
this would be the context of my application:
import { createContext } from "react";
import { Note, NoteState } from "../interfaces/interfaces";
export type NoteContextProps = {
notestate: NoteState,
toggleNote: (id: number) => void;
addNote: (note: Note) => void;
changeState: (action: string) => void;
handleDeleteNote: (id: number) => void;
}
export const NotesContext = createContext<NoteContextProps>({} as NoteContextProps);
and this is the provider of my application
import { useEffect, useReducer } from 'react';
import { Note, NoteState } from '../interfaces/interfaces';
import { NoteReducer } from './NoteReducer';
import { NotesContext } from './NotesContext';
import { DateNote } from '../../helpers/DateNote';
const { today } = DateNote();
const INITIAL_STATE: NoteState = {
notesCount: 2,
notes: [
{
id: 1,
description: 'Welcome to NotesApp, here you can write all the notes you want. If you liked the project leave a comment on my social networks :)',
interesting: true,
title: 'Hello there',
created: today
},
],
active: 'All',
}
interface props {
children: JSX.Element | JSX.Element[]
}
const NotesProvider = ({ children }: props) => {
const localData = localStorage.getItem('notes');
const toggleNote = (id: number) => {
dispatch({ type: 'toggleInteresting', payload: { id } })
}
const addNote = (note: Note) => {
dispatch({ type: 'addNote', payload: note })
}
const changeState = (active: string) => {
dispatch({ type: 'changeState', payload: active })
}
const handleDeleteNote = (id: number) => {
dispatch({ type: 'deleteNote', payload: { id } })
}
const [notestate, dispatch] = useReducer(NoteReducer, INITIAL_STATE, () => {
return localData ? JSON.parse(localData) : localStorage.setItem('notes', JSON.stringify(INITIAL_STATE))
});
useEffect(() => {
localStorage.setItem('notes', JSON.stringify(notestate))
}, [notestate])
return (
<NotesContext.Provider value={{ toggleNote, addNote, changeState, handleDeleteNote, notestate }}>
{children}
</NotesContext.Provider>
)
}
export default NotesProvider;
I am storing the state of my application in Localstorage.
I've been looking for the solution for more than two days but I can't find it

Answer 1

const [notestate, dispatch] = useReducer(NoteReducer, INITIAL_STATE, () => {
return localData ? JSON.parse(localData) : localStorage.setItem('notes', JSON.stringify(INITIAL_STATE))
});
I think here when there is no local data, the notestate receives value from localStorage.setItem(), which is undefined, so the notestate will be undefined.