Почему при fetch локального JSON в React возникает ошибка “Unexpected token '

Question

При попытке загрузить локальный JSON-файл с помощью `fetch` в React появляется ошибка:

```bash
Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
```

Файлы расположены так же, как в примере на Hexlet. Как правильно вызвать `fetch` для локального JSON?

Nikolai Gagarinov · Accepted Answer

Ошибка возникает потому, что браузер не может напрямую читать файлы с файловой системы через `fetch`. Вместо JSON-файла возвращается HTML (например, страница 404 или index.html), поэтому парсер JSON видит `<` вместо `{`.

### Как исправить
1. Положите JSON-файл в папку `public` вашего React-приложения. Например:

```bash
my-app/public/data.json
````

2. Используйте `fetch` относительно корня `public`:

```javascript
fetch('/data.json')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));
````

В этом случае файл будет доступен по URL, и `fetch` сможет корректно прочитать JSON.

Альтернативно можно настроить Webpack/DevServer, чтобы он отдавал локальные файлы, но проще использовать `public` для статических ресурсов.

Ну и посмотрите [пример настроенного приложения](https://github.com/hexlet-components/react-app-example/tree/main/frontend)

Почему при fetch локального JSON в React возникает ошибка “Unexpected token '<'”?

Ответы

Как исправить