Can't fetch local file

Question

It works when I fetch a tsv file remotely:

// Works well
fetch(
    `https://raw.githubusercontent.com/reactivemarkets/react-financial-charts/master/packages/stories/src/data/MINUTES.tsv`,
)
    .then((response) => response.text())
    .then((data) => tsvParse(data, parseData()))
    .then((data) => {
        this.setState({
            data,
        });
    })
    .catch(() => {
        this.setState({
            message: `Failed to fetch data.`,
        });
    });

However, if I copy this file locally (both in the same directory as the .tsx file, as well as in the project's root directory), and replace the argument of the fetch function, it doesn't work.

// Doesn't work if I change the fetch input to this:
fetch('MINUTES.tsv')

// Also doesn't work
fetch('./MINUTES.tsv')

I get this error in the console output:

GET http://localhost:9000/minutes.tsv 404 (Not Found)

`fetch` uses HTTP protocol. Add more context for the problem. — Adam Azad, Jul 10 '21 at 17:26
@AdamAzad I added some info. I'm trying to parse the file. The first code block pulls the file from remote and then parses. I'm trying to do the same for my local `tsv` file instead. — Jase, Jul 10 '21 at 17:28

score 1 · Accepted Answer · answered Jul 10 '21 at 17:29

1

You should put your tsv file to the public folder of your project if you're using create-react-app for example. If you're not. You need to serve that file for it to be available for the fetch

Please, check this question/aswer

answered Jul 10 '21 at 17:29

Luka

828
9
15

I'm using typescript with webpack. By `public` folder, do you mean `node_modules`? – Jase Jul 10 '21 at 17:32
2

No he means a folder named ```public``` inside your react project – Daniel Olsen Jul 10 '21 at 17:33
Where do you keep your favicon for example? `public` folder is usually on the same level like `node_modules`. Public folder serves `static` assets/content like icons, images, maybe some global css. Files in `public` folder are accessible by URL directly . – Luka Jul 10 '21 at 17:34
1

To serve static content via webpack, check this [answer](https://stackoverflow.com/a/34900495/10415577) – Luka Jul 10 '21 at 17:36
@Luka I followed that answer but it didn't work. I added `publicPath: '/assets/'` to the correct location in my webpack config. Then I created an `assets` folder with `MINUTES.tsv`. I tried to put the `assets` folder both in my root project directory as well as in the `src` directory. Then I did `fetch('assets/MINUTES.tsv')` in my code, but I still get the 404 error that it can't find the file `http://localhost:9000/assets/minutes.tsv` @DanielOlsen – Jase Jul 10 '21 at 17:46
1

Have you tried loading `http://localhost:9000/assets/minutes.tsv` directly via your browser? You need to make sure that's working and only after that you can continue playing with the `fetch` itself. – Luka Jul 10 '21 at 17:53
@Luka Typing that into my browser and I see the text message on the screen "Cannot GET /assets/minutes.tsv" – Jase Jul 10 '21 at 17:57
1

Where did you put your `webpack.config.js` file? You should keep that file in the root of the project. Also, `public` folder should be on the same level like `webpack.config.js` – Luka Jul 10 '21 at 18:02
@Luka I put my `webpack.config.js` in the root folder of the project (next to `package.json` and `tsconfig.json`). I have a `src` folder there too. Inside that `src` folder, I have my `index.tsx` and `index.html`. My entry inside my webpack config is `"./src/index.tsx"`. I've tried putting my `assets` folder *both* in my root project folder, *and* in my `src` folder. Neither approach has worked yet. – Jase Jul 10 '21 at 18:18
1

Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/234725/discussion-between-luka-and-jase). – Luka Jul 10 '21 at 18:18

Can't fetch local file

1 Answers1