Loading...
Loading...
SyntaxError: Unexpected token < in JSON at position 0When you see an unexpected '<' at position 0, your server returned an HTML page (like a 404 or 500 error page) instead of JSON. Your code tried to parse that HTML as JSON and failed immediately at the first '<' character.
Always verify the response Content-Type and status before calling .json().
const res = await fetch('/api/data');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const contentType = res.headers.get('content-type');
if (!contentType?.includes('application/json')) {
throw new Error('Expected JSON, got: ' + contentType);
}
const data = await res.json();In DevTools → Network tab, click the failing request and check the Response tab to see what the server actually returned.
The Unexpected token < error is the proverbial 'canary in the coal mine' for web developers. It almost always indicates a MIME-type mismatch caused by a server-side failure.
When an API call fails (404, 500), many frameworks (like Express, Next.js, or Laravel) are configured to serve a friendly HTML 'Error Page' or a 'Login Page'. The client-side fetch() receives this HTML (which starts with <!DOCTYPE html>) but the code calls .json() on it anyway. The V8 JSON parser sees the first angle bracket (<) and immediately throws a SyntaxError.
Position 0 means the failure happened at the very first character of the response. This is a crucial diagnostic hint: it confirms that no JSON was ever received, and you are likely looking at a complete HTML document instead of a malformed JSON string.