Deployed site cant render data from JSON file

Support
1

Hi!

Im having some trouble with a deployed site. I’ve got a JSON file that I am mapping through and rendering the information from it on different cards on my website.
On my local server, it works perfect and the path is not an issue at all.

When i deploy the website to Netlify, nothing gets rendered.
I receive a console error with
" Error fetching planets: SyntaxError: Unexpected token ‘<’, "<!DOCTYPE “… is not valid JSON”

This is how I fetch the data.

useEffect(() => {
const fetchPlanets = async () => {
try {
const response = await fetch(“/facts.json”, {
headers: {
Accept: “application/json”,
},
});
const data = await response.json();
setPlanets(data);
} catch (error) {
console.error(“Error fetching planets:”, error);
}
};

fetchPlanets();

}, );

Below is a snippet of the facts.json file.

[
{
“name”: “The Sun”,
“id”: “sun”,
“info”: “Our Sun is a 4.5 billion-year-old star blablabla”,
“texture”: “/assets/textures/sun.jpg”
},

When I visit the network tab in the developers tool on the deployed site, I can see under “Response” for facts.json that it responds with my index.html page for some reason?

The website is created with react and vite.
I have added a netlify.toml file for redirects aswell that looks like this

[functions]
directory = “functions”
included_files = [“/facts.json”]

Would be extremely grateful for any help, hopefully I have added all relevant information.
I’ve tried solving it for the last 2 days but I am new to Netlify and I’m having troubles understanding the docs since I am not really sure what to look for…

2

This indicates, (as you’ve found by checking the response), that HTML is being returned (your index.html file), when you expected it to be the .json file.

Since the code that’s trying to fetch the .json is in a useEffect, I presume that it’s on your front-end, (not in a serverless function)?

The included_files definition you have would be for including additional files with the deployment of your serverless functions (it’s not necessary for just deploying regular static files to the CDN).

It’s likely that you have a redirect in place like /* index.html 200 to account for the fact you’ve got an SPA, and in turn that your facts.json file isn’t actually at your root, so when you’re trying to load it, it’s hitting the catch-all redirect and returning your index.html file.

1 Like
3

Hi! Thanks for you response, highly appreciate it.
Yes, you are correct. I missed to mention that I added a _redirects file to the public folder with " /* /index.html 200 ".

By removing that line - the facts.json now gets a 404 status code instead.
The Preview page returns a “page not found” which gives me a idea of the path being wrong.

https://ubiquitous-starlight-47917d.netlify.app/ ← This is the website without the removed _redirects folder, if anyone wants to have a look.
Ps. The sites performance isn’t great…

4

Which matches my guess and confirms why the redirect was catching it, since it isn’t located at /facts.json

To fix you need to determine where your facts.json file actually is, either move the file or point your fetch at the correct location, and then reinstate your redirect.

1 Like
5

Once again, thank you for pointing me in the right direction, sorry for bothering you.

The root directory of the project is where the package.json etc is located, correct?
This is where I’ve placed my facts.json file.

I am probably not understand you fully, but the fetch in the code is pointing in the correct location, as it works on my local server.

The fetched information, should then be displayed on my “/Explore” page, which I cant seem to find when i type in my URL + /Explore, since I removed the _redirects folder.
I can only access the /Explore page when being redirected from the landing page ( https://ubiquitous-starlight-47917d.netlify.app/ )

6

@JonZer The root of your website will be whatever you’ve got set as your Publish directory, (which you may be setting in your netlify.toml), and if you don’t have one set it’s the root of your repository.

Files that aren’t in your Publish directory don’t get deployed to the CDN, so if you have a file in the root of the repository, but then deploy the /dist folder for example, everything in the /dist becomes the / (root) of the site, and anything else that isn’t in the /dist doesn’t get deployed at all.

That’s precisely what the rule in the _redirects file solves for.

When accessing a route directly you’re effectively asking to be given a particular file, for example /Explore would be /Explore.html, and if that file doesn’t exist it would return a 404 status. However having the redirect says… “for any file that doesn’t exist, return the contents of the /index.html file instead”, and it’s at that point that your SPA (Single Page Application) is able to handle the route and do whatever it does.

1 Like
7

Ahh! I understand.
The publish directory on Netlify is set to “/dist”, so I’ve moved the facts.json file to the dist folder and updated the fetch request so that it points to

    const response = await fetch("/dist/data/facts.json", {

instead. The local server still works as intended, the deployed still does not.

Instated the _redirects folder and added the /* /index.html 200 back to it.

For some reason, it still console logs that facts.json is redirecting me to the index.html site, which points to your last sentence about “For any file that doesnt exist, return the contents of the /index.html”.

Error fetching planets: SyntaxError: Unexpected token ‘<’, "<!DOCTYPE "… is not valid JSON

You’re amazing, thank you!

8

You don’t want this.

If you’ve moved the file to /dist/facts.json, then you would point your fetch to /facts.json.

If you’ve moved it to /dist/data/facts.json, then you would point your fetch to /data/facts.json.

You don’t specify the Publish directory in your paths, as it won’t exist when deployed, it will be /.

9

Hmm, removing the dist from the path name makes it so that I cant find it while running it on my local server though?
I pushed it just to see, but it does not work on the deployed site either.
But it does seem to find the facts.json, but it still returns the index.html.

10

This would depend on how you’re serving the project locally.

Depending on your build system you probably don’t want to actually put the folder/file in /dist as it’s likely that /dist is completely destroyed and recreated every time you build. In which case you need to put the file/folder into whatever folder your build system uses for public or static files, so that it gets copied into the /dist upon every build.

You can test and confirm this behavior by making sure you run your build command locally, and seeing what happens.

11

Finally solved it! Thank you so much!!

Once I put the facts.json in the public folder it worked, as it got copied by the /dist folder aswell making it render on the deployed website like you said.

Thank you for putting so much time in to this issue, really appreciate it!

Now I can finally go out and see the sun.

12

No worries, I’d missed that you were using Vite.

What you’ve experienced is a frequent issue I’ve seen people have with it, most people misinterpret that they can put their files anywhere and that Vite will just “sort it out”, but that’s not the case.

You should have a read of their Static Asset Handling documentation, which is where I normally point everyone.

2 Likes