What causes "SyntaxError: Unexpected token < in JSON at position 0"?

API endpoint returns a 404 Not Found HTML page because the URL is incorrect Server returns a 500 Internal Server Error HTML page instead of JSON API route is not properly configured in the backend server

Is the "SyntaxError: Unexpected token < in JSON at position 0" error serious?

Yes. This is a high-severity error that usually blocks work until it is fixed, but the steps above resolve it.

How to fix SyntaxError: Unexpected token < in JSON at position 0 in React

Q: What does "SyntaxError: Unexpected token < in JSON at position 0" mean?

The "Unexpected token or , which are not valid JSON. This error most commonly occurs in React applications when using fetch() or axios to make API requests.

Q: How do I fix "SyntaxError: Unexpected token < in JSON at position 0"?

This error occurs when JavaScript attempts to parse HTML as JSON, typically happening when a fetch request receives an HTML error page (like a 404) instead of the expected JSON response.

Q: Is the "SyntaxError: Unexpected token < in JSON at position 0" error serious?

Yes. This is a high-severity error that usually blocks work until it is fixed, but the steps above resolve it.

ReactBEGINNERHIGHUpdated Dec 10, 2025· 151 views

This error occurs when JavaScript attempts to parse HTML as JSON, typically happening when a fetch request receives an HTML error page (like a 404) instead of the expected JSON response.

Quick fix

Fixes SyntaxError: Unexpected token < in JSON at position 0

// If you see HTML starting with <!DOCTYPE html> or <html>,
// then you're getting an HTML page instead of JSON

Inspect the actual response in browser DevTools
Temporarily log the raw response text
Verify your API endpoint URL is correct
Ensure your backend server is running

react — error

$// If you see HTML starting with <!DOCTYPE html> or <html>,
// then you're getting an HTML page instead of JSON
SyntaxError: Unexpected token < in JSON at position 0

What this error means

The "Unexpected token <" error is a clear indicator that your code tried to parse HTML as JSON. The "<" character is the first character of HTML tags like `<!DOCTYPE html>` or `<html>`, which are not valid JSON. This error most commonly occurs in React applications when using `fetch()` or `axios` to make API requests. When you call `.json()` on a response, JavaScript expects valid JSON data. If the server returns HTML instead (such as a 404 error page, 500 error page, or even your React app's index.html), the JSON parser encounters the opening angle bracket and throws this error. The error happens at "position 0" because the parser fails immediately upon encountering the first character of the response.

Typical symptoms

Application crashes when attempting to fetch data from an API
Error appears in browser console when making HTTP requests
Network tab shows HTML response instead of JSON
Error occurs after deploying to production but not in development
Fetch or axios requests fail with JSON parsing errors

Common causes

API endpoint returns a 404 Not Found HTML page because the URL is incorrect
Server returns a 500 Internal Server Error HTML page instead of JSON
API route is not properly configured in the backend server
Proxy configuration in Create React App or Vite is incorrect
CORS error causes the browser to return an error page
Backend server is not running or crashed
Incorrect API URL in fetch request (typo or wrong environment variable)
Server restart is needed after adding new routes
Production build uses wrong API base URL
Static hosting returns index.html for unknown routes instead of 404

How to fix "SyntaxError: Unexpected token < in JSON at position 0"

1Inspect the actual response in browser DevTools

Open your browser's Developer Tools (F12 or right-click → Inspect) and go to the Network tab. Find the failed request and check the Response tab to see what the server actually returned.

javascript

// If you see HTML starting with <!DOCTYPE html> or <html>,
// then you're getting an HTML page instead of JSON

Look for status codes like 404 (Not Found) or 500 (Internal Server Error) in the Status column.

2Temporarily log the raw response text

Modify your fetch code to log the raw response before parsing it as JSON. This helps identify what you're actually receiving.

javascript

fetch('/api/users')
  .then(response => {
    // Log the raw response
    return response.text().then(text => {
      console.log('Raw response:', text);
      try {
        return JSON.parse(text);
      } catch (err) {
        console.error('Failed to parse JSON:', err);
        throw err;
      }
    });
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Check your console to see the actual response content.

3Verify your API endpoint URL is correct

Double-check that your API URL matches the backend route exactly, including spelling, case sensitivity, and path structure.

javascript

// ❌ Wrong - typo in endpoint
fetch('/api/usres')

// ✅ Correct
fetch('/api/users')

// ❌ Wrong - missing /api prefix
fetch('/users')

// ✅ Correct - with proper prefix
fetch('/api/users')

If using environment variables, verify they're set correctly:

javascript

// .env.local
REACT_APP_API_URL=http://localhost:3001

// In your code
const apiUrl = process.env.REACT_APP_API_URL;
console.log('API URL:', apiUrl); // Verify it's not undefined
fetch(`${apiUrl}/api/users`)

4Ensure your backend server is running

If your backend server isn't running, the frontend may receive an error page from the development server instead.

bash

# Start your backend server
cd backend
npm start

# Or if using a monorepo
npm run dev:server

After starting the server, verify it's accessible:

bash

# Test with curl
curl http://localhost:3001/api/users

# Should return JSON, not HTML

5Check and fix proxy configuration (Create React App)

If you're using Create React App with a backend API, configure the proxy correctly in package.json.

json

// package.json
{
  "name": "my-app",
  "proxy": "http://localhost:3001"
}

After adding or modifying the proxy, restart the development server:

bash

# Stop the server (Ctrl+C) and restart
npm start

Then use relative URLs in your fetch calls:

javascript

// ✅ Use relative URL - proxy will forward to backend
fetch('/api/users')
  .then(res => res.json())
  .then(data => console.log(data));

6Add response validation before parsing JSON

Implement defensive coding by checking the response status and content-type before parsing.

javascript

async function fetchData(url) {
  const response = await fetch(url);

  // Check if response is OK (status 200-299)
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }

  // Check content-type header
  const contentType = response.headers.get('content-type');
  if (!contentType || !contentType.includes('application/json')) {
    const text = await response.text();
    throw new Error(`Expected JSON but received: ${text.substring(0, 100)}`);
  }

  return response.json();
}

// Usage
fetchData('/api/users')
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error.message));

This prevents the confusing "Unexpected token" error and gives you clearer error messages.

7Fix backend route configuration

Ensure your backend routes are properly defined and return JSON responses.

javascript

// Express.js example
const express = require('express');
const app = express();

// ✅ Correct - returns JSON
app.get('/api/users', (req, res) => {
  res.json({ users: [] });
});

// ❌ Wrong - might return HTML on error
app.get('/api/data', (req, res) => {
  const data = getData(); // If this throws, Express sends HTML error
  res.send(data);
});

// ✅ Better - handle errors and return JSON
app.get('/api/data', async (req, res) => {
  try {
    const data = await getData();
    res.json(data);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.listen(3001, () => {
  console.log('Server running on port 3001');
});

After modifying routes, restart your backend server.

8Configure production API URLs correctly

In production, ensure your API base URL points to the correct backend server.

javascript

// config.js
const API_BASE_URL = process.env.NODE_ENV === 'production'
  ? 'https://api.yourdomain.com'
  : 'http://localhost:3001';

export default API_BASE_URL;

// In your components
import API_BASE_URL from './config';

fetch(`${API_BASE_URL}/api/users`)
  .then(res => res.json())
  .then(data => console.log(data));

For Vite, use environment files:

bash

# .env.production
VITE_API_URL=https://api.yourdomain.com

javascript

// In your code
const apiUrl = import.meta.env.VITE_API_URL;
fetch(`${apiUrl}/api/users`)

Advanced notes

Understanding the Root Cause: This error fundamentally stems from a mismatch between what your code expects (JSON) and what it receives (HTML). In most web servers, when a request fails, the default behavior is to return an HTML error page. This is why 404 and 500 errors commonly trigger this issue.

Static Hosting Gotcha: When deploying React apps to static hosts (Netlify, Vercel, GitHub Pages), configure redirects properly. Otherwise, API routes that don't exist will return your app's index.html, causing this error. For example, in Netlify, create a _redirects file:

bash

/api/*  https://your-backend.com/api/:splat  200
/*      /index.html                           200

CORS and Proxy Issues: If you see this error only in production but not locally, it might be a CORS issue. When CORS blocks a request, the browser may return an error page instead of the API response. Check your browser console for CORS-related errors. Your backend should include proper CORS headers:

javascript

// Express.js CORS setup
const cors = require('cors');
app.use(cors({
  origin: 'https://yourfrontend.com'
}));

Response.text() vs Response.json(): The response.json() method is convenient but fails silently when the response isn't JSON. For debugging, use response.text() first to see raw content, then manually parse:

javascript

const response = await fetch('/api/data');
const text = await response.text();
console.log('Raw:', text);
const data = JSON.parse(text); // Now you see the exact parsing error

Development vs Production: In Create React App development mode, the dev server proxies requests to your backend. In production, there's no proxy—your app makes direct requests to wherever it's deployed. This is why environment-specific configuration is crucial.

API Versioning: Consider versioning your API routes (e.g., /api/v1/users) to make endpoint changes clearer and reduce typo-related issues.

Frequently asked questions

What does "SyntaxError: Unexpected token < in JSON at position 0" mean?: The "Unexpected token <" error is a clear indicator that your code tried to parse HTML as JSON. DOCTYPE html> or <html>, which are not valid JSON. This error most commonly occurs in React applications when using fetch() or axios to make API requests.
How do I fix "SyntaxError: Unexpected token < in JSON at position 0"?: This error occurs when JavaScript attempts to parse HTML as JSON, typically happening when a fetch request receives an HTML error page (like a 404) instead of the expected JSON response.
What causes "SyntaxError: Unexpected token < in JSON at position 0"?: API endpoint returns a 404 Not Found HTML page because the URL is incorrect Server returns a 500 Internal Server Error HTML page instead of JSON API route is not properly configured in the backend server
Is the "SyntaxError: Unexpected token < in JSON at position 0" error serious?: Yes. This is a high-severity error that usually blocks work until it is fixed, but the steps above resolve it.

Official resources & further reading

📚React Official Documentation

How to fix SyntaxError: Unexpected token < in JSON at position 0 in React

Quick fix

What this error means

Typical symptoms

Common causes

How to fix "SyntaxError: Unexpected token < in JSON at position 0"

Advanced notes

Frequently asked questions

Related errors

Official resources & further reading