Fixing “ESLint Parsing Error: Unexpected token < in JSX”

Root Cause

This error occurs when ESLint encounters JSX syntax but isn’t properly configured to parse it. ESLint needs specific plugins and parser settings to understand JSX syntax.

Solutions

1. Install Required ESLint Packages

npm install --save-dev eslint-plugin-react @babel/eslint-parser
# or
yarn add --dev eslint-plugin-react @babel/eslint-parser

2. Update ESLint Configuration

In your .eslintrc.js or .eslintrc.json:

module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime" // For React 17+ JSX transform
  ],
  parser: "@babel/eslint-parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 2021,
    sourceType: "module",
    requireConfigFile: false,
    babelOptions: {
      presets: ["@babel/preset-react"]
    }
  },
  settings: {
    react: {
      version: "detect" // Automatically detect React version
    }
  },
  rules: {
    "react/jsx-uses-react": "error",
    "react/jsx-uses-vars": "error"
  }
};

3. For TypeScript Projects

npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

Then update ESLint config:

module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 2021,
    sourceType: "module"
  }
};

4. Quick Fix for Create React App

If using Create React App, ESLint is preconfigured. Just ensure you have:

npm install --save-dev eslint-config-react-app

Then extend it in your config:

module.exports = {
  extends: ["react-app"]
};

Common Pitfalls

1. Missing parser: Not using @babel/eslint-parser or @typescript-eslint/parser
2. JSX not enabled: Forgetting to set jsx: true in parserOptions
3. React plugin missing: Not including eslint-plugin-react
4. Version conflicts: Mismatched versions of ESLint and its plugins

Verification

1. Check your .eslintrc file exists with proper configuration
2. Verify all required packages are in devDependencies
3. Ensure your file has a .jsx extension if using JSX (or configure ESLint to allow JSX in .js files)