React website crashes after pressing refresh

Support
, , , ,
#1

I am facing a very weird problem. So, I deploy the website without any problem. All of the routes work fine. But on one of the pages, when I press the refresh button, the site crashes and it gives the error that is in the screenshot. I don’t have this issue on any other page.

I saw that this was discussed in the forum, but they were seeing the error from the get-go.

I see this error only when I refresh one of the pages only. Other pages work fine when I refresh.
456435

#2

Hey @happyHour24

Can you provide a link to the site/page in question?

#3

@coelmay
Here is the link to the front page:

https://bitbeat.netlify.app

By clicking on either of these two, you will get to the page in question.

434534
434534987×372 22.6 KB

When you click on them, it will be fine. It is after refreshing that it will crash.

#4

I also see this in the console

The stylesheet https://bitbeat.netlify.app/css/bootstrap.min.css was not loaded because its MIME type, “text/html”, is not “text/css”.

This is returning the index.html because it doesn’t exist (at least at that address.)

Have you set up a redirect as outlined in this documentation?

The only thing I can see that is different is that when the link to a profile is clicked, there is a POST request to https://eb2mpznt2lst.usemoralis.com:2053/server/functions/theUsers and when the page is refreshed, there is no POST request.

#5

@coelmay

  1. I changed it to <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />.

  2. I have a file named _redirects in the public folder that has this one line only:
    /* /index.html 200

  3. So is the issue coming from the database?

#6

I don’t believe so, because I don’t believe a call to the database is make when the route is refreshed, only when the route is first entered.

#7

so is this fixable? what would you recommend doing?

#8

Without looking over the project code to see what is (or is not) happening where, I could not offer an advise.

#9

is it ok to post the portion of the code that handles that section here? It is around 10 lines.

#10

You can post it here, certainly.

#11 
const Profile = () => {
  const { data: users } = useMoralisCloudFunction("theUsers");
  const { id } = useParams();

  const user = users && users.find((person) => person.objectId === id);
  const username = user?.username ?? "Username"; 

  var avatar = user?.avatar;

  function profAvatar(avat) {
    return avat ? avat._url : avatarDefault;
  }

return(
  <div>
	<Image src={profAvatar(avatar)} />
	<p>{username}</p> 
	
  </div>

); 

}
#12

I notice that the URL of the manifest from that page is https://bitbeat.netlify.app/item/manifest.json but it actually lives at https://bitbeat.netlify.app/manifest.json, so it looks like you might be missing a leading slash in your page template to make links to the manifest file root-relative.

#13

… @philhawksworth
Do you mean the manifest file inside the public folder or build, since the build folder is the one that we upload? And what line should I add inside that manifest file?

#14

I don’t know if this piece of information matters but at some point in the development phase, I’ve added "homepage": "." on the fourth line of my package.json file. And the "start_url" in my manifest.json is set to ".".

#15

hi there, is the issue still occurring, or were you able to resolve it?

#16

I mean that the URL that you serve the manifest file from [(https://bitbeat.netlify.app/manifest.json) does not match the location that you tell the browser to look for it (https://bitbeat.netlify.app/item/manifest.json) so the browser is getting a 404 when it looks for that manifest file on some of your pages.