React application deployed to gh-pages showing empty

I made a react application using create-react-app. It works locally but when I deployed the code to github pages, the page is showing empty. I followed the steps from the official react to gh-pages site and it worked for all my other react apps. I’m thinking there might be an issue somewhere in my code or possibly the route path. I even tried to deploy a duplicate site to netlify and that didn’t work either (still showing blank). Are there any experts who can take a look and let me know what other potential issues might be? Thanks so much in advance!

Here is my code to github: https://github.com/denni5lin/react-recipe-search
Also link to github pages: https://denni5lin.github.io/react-recipe-search/

Side note: I installed react-router by mistake and I’m not using that anywhere in my code. I already tried using basename and that didn’t work.

If you open the console you’ll see an error about null (it’s different from browser to browser).

Hint: clear your browsers localStorage and you’ll see the error on your computer also (or open the local page in incognito window).

Thank you for looking into this. I was able to get rid of the error by removing the basename property and the page is still showing empty. Do you know what else might be causing this issue?

Another hint: what happens if you try to read an item from localStorage that doesn’t exist?

Are you referring to the react lifecycle hooks I have in my App.js? I’m having trouble getting these hints. Could you please give me a little more info? :sweat_smile:

When your app starts it reads item ‘recipes’ from the localStorage. If there is no such item the result will be null. If you assign that null to state your app will break.

Your app works on your local computer only because you already have item ‘recipes’ in your localStorage.

Sometimes gh-pages messed up by the way. I had an app that I e-mailed them about and they fixed it within 24 hours.