Home Page working properly in localhost but throwing error after hosting on Vercel

Question

I created a todo app using react, react-router-dom, redux, and localStorage. It is working fine in localhost, but after hosting in vercel it is showing my error page. When I go to "hostURL/addtodo" it is showing the intended page.

I can't understand what I am doing wrong.

const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,
    children: [
      { path: '/', element: <HomePage /> },
      { path: '/addtodo', element: <AddPage /> },
      { path: '/edit/:id', element: <EditPage /> },
    ],
    errorElement: <ErrorPage />,
  },
])

function App() {
  return <RouterProvider router={router} />
}

function RootLayout() {
  return <Outlet />
}

const [todos, setTodos] = useState(() => {
  const localValue = localStorage.getItem('MYTODOS')
  if (typeof localValue === 'undefined') return []
  //console.log(localValue)
  return JSON.parse(localValue)
})

useEffect(() => {
  localStorage.setItem('MYTODOS', JSON.stringify(todos))
}, [todos])

GitHub Link: Repo

After Hosting: Hosted

Answer 1

Nothing wrong in the routing.

Issue

You have used typeof localValue === 'undefined' to check if the local storage value is undefined. This condition will never be true because typeof will return a string, and it will never be equal to the string 'undefined'.

Solution

It uses localValue ? JSON.parse(localValue) : [] to check if the local storage value is truthy and then parse it, otherwise, it sets an empty array.

const [todos, setTodos] = useState(() => {
  const localValue = localStorage.getItem('MYTODOS');
  return localValue ? JSON.parse(localValue) : [];
});

useEffect(() => {
  localStorage.setItem('MYTODOS', JSON.stringify(todos));
}, [todos]);

I have pulled your repo and it shows the same hosted website error on local too. I had some spare time. I have fixed 7 bugs on your repo. PR link

Please do check, now Todo is working fine.