🔧 Error Fixes

ESLint: Parsing Error — How to Fix Unexpected Token Errors


Parsing error: Unexpected token <
Parsing error: Unexpected token =>
Parsing error: The keyword 'import' is reserved

ESLint can’t parse your code because it doesn’t understand the syntax you’re using (JSX, TypeScript, modern JS features).

Fix 1: JSX Not Recognized

Parsing error: Unexpected token <

ESLint doesn’t understand JSX by default.

For React projects:

npm install -D eslint @eslint/js globals @eslint/compat
// eslint.config.js (flat config)
import js from '@eslint/js';

export default [
  js.configs.recommended,
  {
    files: ['**/*.{js,jsx}'],
    languageOptions: {
      parserOptions: {
        ecmaFeatures: { jsx: true }
      }
    }
  }
];

Fix 2: TypeScript Not Recognized

Parsing error: Unexpected token

ESLint needs a TypeScript parser.

npm install -D typescript-eslint
// eslint.config.js
import tseslint from 'typescript-eslint';

export default tseslint.config(
  ...tseslint.configs.recommended,
);

Fix 3: Modern JavaScript Syntax

Parsing error: The keyword 'import' is reserved

ESLint defaults to ES5. Tell it you’re using modern JS:

// eslint.config.js
export default [
  {
    languageOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module'
    }
  }
];

Fix 4: Wrong File Extension

ESLint might not know to parse .tsx or .mjs files:

// eslint.config.js
export default [
  {
    files: ['**/*.{js,jsx,ts,tsx,mjs}'],
    // ... your config
  }
];

Fix 5: Conflicting ESLint Configs

If you have both .eslintrc and eslint.config.js, delete one. ESLint 9+ uses flat config (eslint.config.js) by default.

# Remove old config
rm .eslintrc .eslintrc.js .eslintrc.json .eslintrc.yml

# Keep only eslint.config.js

Quick Diagnosis

# Check which config ESLint is using
npx eslint --print-config src/App.tsx

# Run with debug info
npx eslint --debug src/App.tsx 2>&1 | head -20