← All errors

SyntaxError: Unexpected token '<', "<!DOCTYPE" is not valid JSON

SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

In one sentence: Your code expected JSON from a request but got an HTML page back, usually an error or 404 page.

What it means

`response.json()` tries to parse the response as JSON. The `<` is the first character of an HTML page (`<!DOCTYPE html>`). So the server sent HTML, almost always because the URL is wrong or the server errored.

Common causes

• The API route URL is wrong, so you got the site's 404 page.
• The API crashed and returned an HTML error page.
• A relative URL like `/api/x` hit your frontend instead of your backend (common with Vite + a separate server without a dev proxy).
• A login redirect sent back the HTML login page.

How to fix it

1. Open the request in the Network tab and look at its status code and response body.
2. Check `res.ok` before calling `res.json()` so you see the real error.
3. Fix the URL or route file location (in Next.js App Router, `app/api/hello/route.ts` serves `/api/hello`).

const res = await fetch("/api/items");
if (!res.ok) throw new Error(`API ${res.status}: ${(await res.text()).slice(0, 200)}`);
const data = await res.json();

Prompt to paste into your AI tool

I get 'Unexpected token <, <!DOCTYPE is not valid JSON'. Check res.ok before parsing, log the status and body, and fix the API URL or route that's returning HTML.

Related errors

• TypeError: Cannot read properties of undefined
• CORS error: blocked by CORS policy
• Hydration failed: server HTML didn't match the client (Next.js)
• Module not found: Can't resolve '...'