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

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

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

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

my-app/public/data.json

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

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

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

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

Ну и посмотрите пример настроенного приложения

Ошибка Unexpected token '<', "<!DOCTYPE "... is not valid JSON значит, что fetch получил HTML-страницу вместо JSON. Сервер разработки не нашёл файл по указанному адресу и отдал index.html, а response.json() попытался разобрать его как JSON.

Решение 1: положить файл в public

Файлы из папки public сервер отдаёт по адресу от корня сайта:

public/
  data/
    users.json
src/
  App.jsx

useEffect(() => {
  fetch('/data/users.json')
    .then((response) => response.json())
    .then((data) => setUsers(data));
}, []);

Путь пишется от корня — /data/users.json, без public и без ../. Файлы из src через fetch недоступны: сборщик не публикует их как отдельные адреса.

Решение 2: импортировать JSON

Если данные не меняются, fetch не нужен. Vite и Create React App умеют импортировать JSON как модуль:

import users from './data/users.json';

console.log(users[0]);

Файл попадёт прямо в сборку.

Как найти причину

Откройте вкладку Network в DevTools и посмотрите на запрос к JSON:

• в ответе HTML — неверный путь, файл не найден;
• статус 404 — файла нет по этому адресу;
• ответ JSON, но ошибка остаётся — в файле синтаксическая ошибка, проверьте его валидатором.

Перед разбором полезно проверить статус ответа:

fetch('/data/users.json')
  .then((response) => {
    if (!response.ok) {
      throw new Error(`Файл не найден: ${response.status}`);
    }
    return response.json();
  });

Открыть HTML-файл двойным кликом, через file://, тоже не получится: браузер запрещает fetch к локальным файлам. Запускайте проект через сервер разработки — npm run dev или npm start.

React и работу с API разбирают в профессии «Фронтенд-разработчик».