-1

I have a React app and a JSON file in the public folder. I' was fetching the data from this json file in the main App.js file and everything was working as expected with no error. I finished the app and run npm run build and since then I'm receiving the following error: SyntaxError: Unexpected token < in JSON at position 0

I did not change the JSON file neither moved any files within my project. Can someone please explain to me what all of a sudden caused that error?

Also I've been trying to resolve it for the past two days looking at available resources online and other topics here but none of the solutions seem to work. Someone suggested to add the below headers to the fetch request but that didn't work.

headers : { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
       }

Can someone please help?

The code:

 fetch("questions.json", {
      headers : { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
       }
    })
      .then(res => res.json())
      .then(data => {
        
        const allQuestions = data[quizType];
        const randomNumber = Math.floor(Math.random()*allQuestions.length);
        setQuestion(allQuestions[randomNumber].question.text);
        setAnswer(allQuestions[randomNumber].answer.text);
        setSource(allQuestions[randomNumber].answer.source);
      })

      .catch(error => console.log( error.toString()));

The structure:

public
- questions.json
src
 - App.js
Anna
  • 79
  • 1
  • 9
  • If your server isn't serving questions.json at /questions.json, then you won't get the json when you fetch it. – Kevin B Mar 01 '22 at 20:45
  • 1
    Can you tell us more about your build process? typically after a build the bundled files are hosted from a diff root directory build/ or dist/ something like that. Typically if you have static assets you need to make sure your build process copies those files to the final build directory also. – Christian Colón Mar 01 '22 at 20:45
  • I have a build directory and I can see the json file in this directory. Apart form the json file there is also a static directory containing css and js folders. Is that what you mean @ChristianColón? Thank you for your help btw – Anna Mar 01 '22 at 20:58
  • 1
    @Anna yes that is what i was talking about, does the index also get copied to this build directory? Also how are you serving the app after it's built? I'm assuming you are using something to serve locally for development? – Christian Colón Mar 01 '22 at 22:23
  • @ChristianColón yes index.html is also there, seems like all files are there. I was able to go around this problem with Kevin's suggestion below (paste the full domain url to `fetch`), but I'm still trying to figure out why simply `fetch("/questions.js")` doesn't work (it used to work before). I run it locally with `npm start` but I will be deploying it to GitHub pages. – Anna Mar 01 '22 at 22:39

1 Answers1

0

In my experience when you get SyntaxError: Unexpected token < in JSON at position 0 it's because returned a 404 error page or an HTML page. Are you able to load the json file in the browser?

Kevin Z
  • 65
  • 8
  • Yes, the file appears when I navigate to it. – Anna Mar 01 '22 at 20:46
  • Can you open your browsers network tab and see what the server response is for that request when you are in the application? its likely getting your index.html as a fallback because its having trouble finding the file. – Christian Colón Mar 01 '22 at 20:49
  • @Anna try adding a forward slash to your path in the fetch statement. This question is similar to yours: https://stackoverflow.com/questions/36369082/relative-paths-with-fetch-in-javascript this might help you. – Kevin Z Mar 01 '22 at 20:58
  • Yes, I'm getting my index.html file but not sure why when the json file is there. – Anna Mar 01 '22 at 20:59
  • @KevinZaworski I already tried that but it also didn't work. I worked on this project for the last few weeks and never had any issue with fetching this data so I'm really confused. – Anna Mar 01 '22 at 21:04
  • 1
    @Anna perhaps last thing to try is using the full URL in your fetch. – Kevin Z Mar 01 '22 at 21:20
  • It works with full url but I don't understand why it doesn't work with the relative path. Simply `fetch("/data.json")` should work. Anyway will leave it with the full url then. Thank you – Anna Mar 01 '22 at 21:26