React fetch request for local JSON file returns index.html and not the JSON file

Question

I am experiencing some unexpected behavior using react and fetch. It should be very straight forward.

My code looks like the following:

import React, { Component } from 'react';

class App extends Component {

  componentDidMount() {
    fetch('/dict.json')
    .then(res => res.json())
    .then(json => console.log(json))
  }

 render() {
    return (
     <p>Example</p>
   );
  }
}

and my folder structure looks like this

- src
   |_app.js
   |_dict.json
- index.html

When I check the network it is requesting the index.html page which makes no sense to me. Has anyone experienced this before?

linasmnew · Accepted Answer · 2017-10-28 10:35:28Z

3

Production: If this code is going to run in production then fetch is not going to work here unless you have setup a web server to serve that JSON file, however, you could import the local JSON file instead:

import dict from './_dict.json';

Then inside of your componentDidMount you can just map over it

let results = dict.map((item, index) => {
   // ...
});

Localhost: If you just want to run this on localhost, then I don't see why it wouldn't work unless, and which I suspect is the case, your React app is proxying HTTP requests to a local webserver (as is extremely common in Reactjs development) and that local webserver is not setup to serve your JSON file up. So check your package.json or webpack setup for something like this:

"proxy": "http://localhost:8080"

And configure the webserver running on that port to serve your JSON file up in response to a request.

edited Oct 28, 2017 at 10:35

answered Oct 28, 2017 at 9:48

linasmnew

3,9672 gold badges23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

peter flanagan Over a year ago

oh ok, that's correct! so you can't make a request like that to a local file? I thought this was possible with jquery ajax methods?

peter flanagan Over a year ago

slothparadise.com/how-to-use-jquery-to-grab-json-files - IM confused :-S

linasmnew Over a year ago

Is your goal to make it work in production or on localhost?

linasmnew Over a year ago

Websites can make an HTTP request to localhost but only if they live on localhost themselves, it won't work if your application is live

linasmnew Over a year ago

I suspect you might be running a server in the background, where all HTTP requests are proxied to from your React app and that server is not setup to return the local JSON file

|

Viktoriia Kapitulina · Accepted Answer · 2018-06-23 10:06:17Z

1

Try this file structure

- public
   |_index.html
   |_dict.json
- src
   |_app.js

answered Jun 23, 2018 at 10:06

Viktoriia Kapitulina

211 bronze badge

Collectives™ on Stack Overflow

React fetch request for local JSON file returns index.html and not the JSON file

2 Answers 2

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Related