0

I've seen a few of these posts on StackOverflow already, though I really can't seem to get mine working no matter what I try.

I am trying to host a webpage, though when deploying I am left with a blank screen, and the following error in the console:

Uncaught SyntaxError: Unexpected token '<' in main.e7fa3b75.js:1

I've seen posts which suggest it is a problem with the pathing to my static files, though I cant seem to sort it out.

This post suggests I should remove an extension from my package.json, though I don't use that extension.

This post says I should remove the repository name from the homepage field in the package.json, though that also wouldn't work for me.

I'm out of ideas, here is the repo, if someone doesn't mind taking a look?

I have got it to render the website for a few moments, only to disappear to the same white screen moments later. There are no problems if I run the page on local host.

UPDATE

I have since got the application to host, but only if I explicitly visit the URL of the landing page. https://jcdw99.github.io/

From the landing page there is a /papers route which can be reached from the navbar. If you press on the button, the page renders. Though, if you try to explicitly view the page, by manually visiting https://jcdw99.github.io/papers it returns a 404.

Any help?

Justin DeWitt
  • 59
  • 8
  • Do you see the same behavior locally as well? like visiting `http://localhost:3000/papers`. Also I don't see `/pages` route there is only `/papers` in the routes which point to `` – Kartoos Nov 16 '22 at 11:51
  • my bad- I meant papers, pages is what I used to call the route. What I've noticed is: If I navigate to the home page using the link indicated in package.json, the webpage opens (try it yourself). If I use the navbar, everything navigates correctly. However, if I try to navigate to one of the routes without the navbar, IE by entering the url explicitly, I get a 404.. – Justin DeWitt Nov 16 '22 at 23:48

1 Answers1

1

Try <HashRouter> instead of <BrowserRouter> since Github pages don't support HTML5 history API (see notes on client side routing) but React BrowserRouter uses it. See this question with similar problem.

One observation is if you navigate directly using # in the url, like https://jcdw99.github.io/#/papers it works!

Kartoos
  • 737
  • 1
  • 8
  • 24
  • Thank you for the help! I've changed it to a `````` and it doesn't seem to function differently. I tried navigating to [https://jcdw99.github.io/#/papers](https://jcdw99.github.io/#/papers) though it navigates to the home page, rather than the ```/papers``` router? Do you observe the same results? – Justin DeWitt Nov 18 '22 at 07:36
  • On second attempt, I followed the [page](https://stackoverflow.com/questions/71984401/react-router-not-working-with-github-pages/74149347#74149347) that you've linked, and changed my ```homepage:``` field in ```package.json``` to also include the ```#```. This seems to have fixed the issue. – Justin DeWitt Nov 18 '22 at 07:54