🔧 Error Fixes
· 1 min read

SyntaxError: Unexpected Token — How to Fix It


SyntaxError: Unexpected token '<'
SyntaxError: Unexpected token 'export'
SyntaxError: Unexpected token '}' at position 42

JavaScript or JSON encountered a character it didn’t expect. Something is malformed.

Fix 1: HTML Instead of JSON

// ❌ API returned HTML (404 page) instead of JSON
const res = await fetch('/api/data');
const data = await res.json();  // 💥 Unexpected token '<'

// ✅ Check the response first
const res = await fetch('/api/data');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();

Fix 2: Trailing Comma in JSON

// ❌ JSON doesn't allow trailing commas
{
    "name": "Alice",
    "age": 30,  // 💥 Trailing comma
}

// ✅ Remove the trailing comma
{
    "name": "Alice",
    "age": 30
}

Fix 3: ESM in CommonJS (or Vice Versa)

// ❌ Using import in a CommonJS file
import express from 'express';  // 💥 Unexpected token 'import'

// ✅ Option A: Use require
const express = require('express');

// ✅ Option B: Add "type": "module" to package.json

Fix 4: Missing Bracket or Parenthesis

// ❌ Missing closing bracket
function greet(name {  // 💥 Missing )
    return `Hello ${name}`;
}

// ✅ Fix the syntax
function greet(name) {
    return `Hello ${name}`;
}

Fix 5: Comments in JSON

// ❌ JSON doesn't support comments
{
    // This is a comment  💥
    "name": "Alice"
}

// ✅ Remove comments from JSON files
// Use .jsonc or .json5 if you need comments

Fix 6: Wrong File Being Served

# ❌ Your bundler isn't running, so the browser gets raw source
# Check if your dev server is running
npm run dev

# Check if the build output exists
ls dist/
npm run build