Fetching JSON returns error Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 and status code 304: Not Modified

Question

I am trying to fetch a JSON file but it returns the errors Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 and 304: N

Answer 1

I think you might be using create-react-app. As in create-react-app, webpack-dev-server is used to handle the request and for every request it serves the index.html. So you are getting

Unexpected token < in JSON at position 0 and status code 304: Not Modified

So to solve this, you can do following:

1. Run npm run eject

After that config folder is created at the root of the app.

2. Go to config/webpackDevServer.config.js.

3. Then we need to set disableDotRule: false in webpackDevServer.config.js.

       historyApiFallback: {
        // previously disableDotRule: true,
        disableDotRule: false,
       },
   

4. Keep your json file i.e docs/iat/iatDependency.json in public folder.

5. Use fetch('/docs/iat/iatDependency.json').then(res => res.json()).then(data => console.log('data', data))