Home
Support Forums

My deployed React app displays a blank page and error 404

I deployed my react app https://unruffled-wiles-dad21c.netlify.app/ to Netlify, however when I open it in the browser, I see only a blank page. The console says “Failed to load resource: the server responded with a status of 404 ()”. I’ve read some topics on this issue and tried the solutions recommended but they haven’t worked for me. I’d appreciate help, please.

Link to my repository: GitHub - toyosicodes/to-do-list: To-do app built with React JS.

Also, while redeploying I get the message: “Warning: some redirects have syntax errors:
1:26:15 PM: ​
1:26:15 PM: Could not parse redirect number 1:
1:26:15 PM: {“from”:”/index.html",“query”:{},“status”:200,“force”:false,“conditions”:{}}
1:26:15 PM: Missing “to” field" but I don’t know what to do about it. I’d share a screenshot but I’m a new user and so cannot share attachments.

Hi @toyosicodes

The reason behind the blank screen is the numerous 404 Not Found in the console.

For instance https://unruffled-wiles-dad21c.netlify.app/to-do-list/static/css/main.122633d9.chunk.css

Notice the to-do-list which should not exists, as that file exists at https://unruffled-wiles-dad21c.netlify.app/static/css/main.122633d9.chunk.css.

The reason the file paths aren’t correct is because of the homepage value in the package.json in your git repository.

"homepage": "http://toyosicodes.github.io/to-do-list",

If you simply remove this value (you are no longer deploying to github.io) you should find your site works correctly.

Another thing to note, in your git repository you have a netlify.toml file in public. This file should (generally) exist in the root of the repository.

This error message is due to invalid syntax in public/_redirects file. The file should read

/*    /index.html    200

where you have

/index.html    200
2 Likes

Thank you SO much, this worked! I really appreciate you helping me :pray:t5: