Fix "Unexpected token in JSON" Errors

"Unexpected token in JSON" means JSON.parse (or response.json()) was given text that isn't valid JSON. The bug is almost never in JSON.parse. It's in the text you fed it. So the fix always starts the same way: look at the actual text. The message usually tells you what kind of text it was.

Step 1: Read the exact message

Modern Chrome and Node (V8) quote the start of the bad text. These are the real messages from Node 24:

const samples = [
  "<!DOCTYPE html><html>",
  "",
  "undefined",
  "{name: \"Ana\"}",
  "{\"a\": 1,}",
  "{\"total\": 1500",
  "OK",
];
for (const text of samples) {
  try {
    JSON.parse(text);
  } catch (error) {
    console.log(`${error.name}: ${error.message}`);
  }
}

SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
SyntaxError: Unexpected end of JSON input
SyntaxError: "undefined" is not valid JSON
SyntaxError: Expected property name or '}' in JSON at position 1 (line 1 column 2)
SyntaxError: Expected double-quoted property name in JSON at position 8 (line 1 column 9)
SyntaxError: Expected ',' or '}' after property value in JSON at position 14 (line 1 column 15)
SyntaxError: Unexpected token 'O', "OK" is not valid JSON

Firefox and Safari word them differently (Firefox says JSON.parse: unexpected character at line 1 column 1 of the JSON data), but the causes are the same.

Step 2: Log the raw text

If the text comes from fetch, don't call response.json() while debugging. Read it as text and look:

const response = await fetch(url);
const text = await response.text();
console.log(response.status, response.headers.get("content-type"));
console.log(text.slice(0, 300));
const data = JSON.parse(text);

In the browser, the Network tab shows the same thing: click the request, then Response. You now know what you got, and the causes below are easy to match.

Cause 1: you got HTML

Unexpected token '<', "<!DOCTYPE ".... The server sent a web page, not JSON. Usual reasons, most likely first:

1. Wrong URL. A typo, a missing /api prefix, or a relative URL that resolved against the current page. Many servers and single-page apps return their HTML page for any unknown path.
2. An error page. A 404, 500 or 502 page from the server or proxy. Check response.status.
3. A login page. The session expired and the server redirected to its login form. fetch follows redirects, so you see a 200 with HTML.

The fix is to check before parsing:

async function getJson(url) {
  const response = await fetch(url);
  const type = response.headers.get("content-type") ?? "";
  if (!response.ok) {
    throw new Error(`HTTP ${response.status} from ${url}`);
  }
  if (!type.includes("application/json")) {
    throw new Error(`Expected JSON from ${url}, got ${type || "no content-type"}`);
  }
  return response.json();
}

try {
  await getJson("https://jsonplaceholder.typicode.com/users/999");
} catch (error) {
  console.log(error.message);
}
const user = await getJson("https://jsonplaceholder.typicode.com/users/1");
console.log(user.name);

HTTP 404 from https://jsonplaceholder.typicode.com/users/999
Leanne Graham

Now the error says what actually went wrong, instead of complaining about a <.

Cause 2: the text is empty

Unexpected end of JSON input. Common with 204 No Content responses, a DELETE that returns nothing, or a server that crashed mid-response. Check before parsing:

const text = await response.text();
const data = text ? JSON.parse(text) : null;

Cause 3: it was undefined

"undefined" is not valid JSON. You passed a variable that was never set. Typical: JSON.parse(response.data) when the field is called something else, or reading a property that doesn't exist. Log the variable right before the parse. Note that a missing localStorage key gives null, and JSON.parse(null) returns null without throwing, so that one fails later, somewhere else.

Cause 4: it's JavaScript, not JSON

Expected property name or '}' and Expected double-quoted property name mean someone wrote JSON by hand: keys without quotes, single quotes, a trailing comma, or a comment. JSON is stricter than JavaScript. If it's a file you control, fix the file, and paste it into a validator or run node -e "JSON.parse(require('fs').readFileSync('data.json','utf8'))" to find the position. If you build JSON in code, never glue strings together. Use JSON.stringify(data).

Cause 5: it was already parsed

"[object Object]" is not valid JSON. You called JSON.parse on something that's already an object, often because a library like axios already parsed the response for you. Remove the extra parse.

Next time you see this error, what's the first thing you'll log: the parsed data, or the raw text?