React: Fetch local JSON file - SyntaxError: Unexpected token < in JSON at position 0

Question

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

Answer 1

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?