ESLint parsing error: Unexpected token < in JSX

The error “ESLint parsing error: Unexpected token < in JSX” typically occurs when ESLint is unable to parse JSX syntax in your JavaScript files. This happens because ESLint doesn’t recognize JSX by default, as it needs specific configuration to understand JSX syntax and React components.

Causes of the Error

1. Missing Babel ESLint Parser: ESLint does not parse JSX by default, as it only understands standard JavaScript. You need to configure ESLint to use a parser that understands JSX, such as babel-eslint or @babel/eslint-parser.
2. Incorrect ESLint Configuration: Your ESLint configuration might be missing the necessary plugins or settings to handle JSX code properly.
3. Missing JSX or Babel Presets: If your project doesn’t have the necessary Babel presets to handle JSX, you might see parsing errors when ESLint tries to parse JSX.
4. Invalid File Extensions: If the file where JSX is being used does not have the .jsx or .js extension, ESLint might not recognize the JSX code and throw an error.

How to Fix the Error

1. Install the Babel ESLint Parser

You need to install a parser like @babel/eslint-parser that ESLint can use to parse JSX syntax.

Steps to fix it:

1. Install the Babel ESLint parser: npm install --save-dev @babel/eslint-parser
2. Update your ESLint configuration to use the @babel/eslint-parser as the parser. In your .eslintrc file (or eslintConfig in package.json), specify the parser: { "parser": "@babel/eslint-parser", "parserOptions": { "ecmaVersion": 12, // or the version you're using "sourceType": "module", "ecmaFeatures": { "jsx": true } }, "extends": ["eslint:recommended", "plugin:react/recommended"], "plugins": ["react"], "rules": { // Your custom ESLint rules } }

2. Install Babel Plugins and Presets

If you’re using Babel to transpile your code, ensure you have the necessary Babel plugins and presets for React JSX.

1. Install the necessary Babel presets: npm install --save-dev @babel/preset-react @babel/preset-env
2. Ensure your Babel configuration is set up correctly (in .babelrc or babel.config.js): .babelrc or babel.config.js: { "presets": ["@babel/preset-env", "@babel/preset-react"] }

3. Update ESLint Configuration for JSX

Make sure your ESLint configuration enables the JSX feature. Here’s an example .eslintrc configuration:

{
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "plugins": ["react"],
  "rules": {
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off"  // for React 17+
  }
}

• parserOptions.ecmaFeatures.jsx enables JSX parsing.
• react/jsx-uses-react and react/react-in-jsx-scope are helpful for React 17 and later, where you don’t need to import React explicitly anymore (due to the JSX Transform).

4. Check Your File Extensions

Ensure that files containing JSX use the correct extension, either .jsx or .js. ESLint will treat .jsx files as containing JSX syntax, but it’s still common to use .js with modern React configurations.

If you have JSX in .js files, make sure you configure your ESLint to parse them correctly, as shown in the configuration above.

5. Ensure All Dependencies Are Installed

Ensure that all dependencies required for Babel and ESLint to work together are properly installed:

npm install --save-dev babel-eslint @babel/eslint-parser @babel/preset-react eslint-plugin-react eslint

Example Project Setup

Here’s how you can set up the necessary configurations in a typical React project:

1. Install dependencies: npm install --save-dev eslint @babel/eslint-parser babel-eslint @babel/preset-react eslint-plugin-react
2. .babelrc (or babel.config.js): { "presets": ["@babel/preset-env", "@babel/preset-react"] }
3. .eslintrc (or eslintConfig in package.json): { "parser": "@babel/eslint-parser", "parserOptions": { "ecmaVersion": 2020, "sourceType": "module", "ecmaFeatures": { "jsx": true } }, "extends": ["eslint:recommended", "plugin:react/recommended"], "plugins": ["react"], "rules": { "react/jsx-uses-react": "off", "react/react-in-jsx-scope": "off" } }