React website crashes after pressing refresh

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

Hey @happyHour24

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

@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.

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

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.

@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?

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.

so is this fixable? what would you recommend doing?

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

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

You can post it here, certainly.

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>

); 

}

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.

@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?

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 ".".

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

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.