Fetch API in React for JSON file: Uncaught (in promise) SyntaxError: Unexpected token � in JSON at position 0

Question

I'm getting this error when I'm trying to parse a JSON file available on a URL.

This is the code I'm using:

let link = 'https://Company-url/file.json';
fetch(link, {
          method: "GET",
        }).then(resp => resp.json())
      .then((data) => {
        functionName.setData(data);
      });

The file is directly (publically) accessible by its URL.

I read other answers and tried giving content type as JSON in the header but it is still showing the same.

In the chrome network tab, I'm able to view the file being fetched and checked with the JSON lint, if the syntax of JSON was valid. It was showing valid.

Not able to figure out what am I missing here.

This is the JAVA code I'm using to generate the JSON file:

File jsFil = new File(i18nGuestPayResourceFolder + File.separator+outputFileName);
Writer out = new OutputStreamWriter(new FileOutputStream(jsFil), "UTF-16");
out.write(msgContainr.getMesageKeyValueJson());

Answer 1

Based on the comments here, I changed my JAVA code to below so that JSON is generated with UTF-8 encoding.

Writer out = new OutputStreamWriter(new FileOutputStream(jsFil), "UTF-16");

Now my files are being read from the API.

I got to know it happens because default encoding is assumed to be UTF-8 on webpages.