React Application Builds & Deploys into a Blank Page

Support
,
1

I’m relatively new to Netlify and I’ve come across a barrier. When I build and deploy a create-react-app to Netlify I don’t get any errors, but the result is a blank page.

This is my the public Netlify page: https://admiring-shockley-3c14e8.netlify.com/

I get one warning when I inspect the page: "Uncaught SyntaxError: Unexpected token <"

Drilling into the code here:
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><title>Case Convertor</title></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/caseconverter/static/js/main.217fe3f5.js"></script></body></html>

Nothing crazy, right?

I’ve deployed to Github Pages with no errors or issues. Code to my Github Repo can be found here: GitHub - rickknowlton/caseconverter

2

hi @rickknowlton - did you take a look at this post?

if you search for Unexpected token <" you’ll see there are a couple of times this error has come up - if none of those help, we can take a closer look :muscle:

3

So, I was able to solve the issue (and I’m not sure on the “why”) by changing the homepage listed in my package.json to “.”

Any of y’all have an explanation for this out of curiosity?

1 Like
4

hi @rickknowlton - that’s interesting. Does it break reliably when you change it back?

if no - this might be something unrelated. If yes, can you post your before and after package.json please?

5

@perry I was facing the same issue. @rickknowlton’s solution fixed it😲 You should really look into it. If I change it back it breaks.

The only change I made to my package.json file was changing the value I had in the homepage entry to “.”

Before:

{
  "homepage": "https://avpaul.github.io/outcode",
}

To:

{
"homepage": ".",
}
6

so, did a few test deploys to see if I could break things again. initially my package.json featured this little homepage field:

{
  "homepage": "https://rickknowlton.github.io/caseconverter",
}

when I changed the homepage to “.” I could then deploy. that said, I tried to go back and see if changing it to the original would halt the build again, but it didn’t. I also removed the homepage field from the package.json altogether and it had no effect. so, now I’m unsure as to what could have happened originally. maybe some internal hiccup?

7

this seems to be an known issue, potentially?

8

well that’s interesting! thanks for digging in! kind of a weird bug, right?

9

yeah! I’m not a super expert on this, but it does seem very odd. We’ll definitely make note of this, but you have a workaround for now, correct?

10

When I tried to deploy my react app it shows build error but after 6 tries it shows successful deploy website is live but when i preview the url it shows blank page and some time broken url. Can anyone help me out as I am too much exhausted and dissappointed . I will be very thankful for your help this is my repo link
https://github.com/Ayesha878/mobile-store

11

hi ayesha, what is the link to your live site?

12

After 1hour of read all articles . Here is the solution:
> [[redirects]]
> from = “/*”
> to = “/index.html”
> status = 200

:smiley: Pls remove force=true as previous :smiley: No need to add homepage to pkg.json. No need to add PUBLIC_URL :smiley:

1 Like
13

wow thanks @kuangthien! Awesome!!!

14

I tried a lot of the solutions suggested on netlify answers.
My specific case was netlify was not able to locate the /build folder.
This was due to an edge case inside my code which specified the build folder.

So… just keep that in mind if these solutions aren’t working. It might be that netlify is not locating the correct location for the build folder.

15

Thank you so much for coming back and sharing this, @napomj. This will be beneficial to future Forums members. Happy building :rocket: