Site is live, but screen is blank (React app)

I am trying to deploy a React typescript app from an existing github repo that uses Vite as a build tool.

I managed to publish the site:

10:26:18 AM: Section completed: deploying

10:26:18 AM: Site deploy was successfully initiated

10:26:18 AM: (Deploy site completed in 286ms)

But when I go to the link ( https://todolyst.netlify.app) - it’s just a blank page.

Here’s the repo I’m trying to deploy: GitHub - isaandrea12/ToDoList

These are my Build Settings.

Hi @devisa , thanks for the post and welcome.
I visited your site and checked the console. The error showing in the console is below.

TypeError: Cannot read properties of null (reading 'sort')

The error above is happening because you are trying to call the sort method on a null or probably undefined instead of an array.

Upon investigating the code in the repository you shared the file where you are trying to call the sort method is the ToDoList.tsx component.

The code below is on line 9, and it is trying to get the todos from the local storage. Since the application is running for the first time, the value that is returned will be null

const storedValue = localStorage.getItem("todo");

The variable updatedList is also dependent on storedValue. Therefore when you call the sort method, an error is thrown.

You can fix the code above to return array if the returned value is null by using the code below.

const storedValue = localStorage.getItem("todo")? localStorage.getItem("todo"): [];

OR

const storedValue = localStorage.getItem("todo") === null? []: localStorage.getItem("todo");

Also debug your code and make sure you are calling the sort method on a variable that is actually an array.
Hope the above helps.

Let me know the outcome.

Thanks.

2 Likes

Thank you sooo much! Where exactly did you find the TypeError? I never found the error.

Hi @devisa , I am glad my suggestions helped you to fix the problem.

Usually when debugging your applications, check the browser console or application console for more information as errors are thrown on the console most of the time.