'eslint "parsing error: Unexpected token {" in JSX

const title = 'My Minimal React Webpack Babel Setups';

const App = () => (<div><b>{title}</b><img src={img} /></div>)

This code occurs an error "ESLint Parsing Error: Unexpected token {"

my .eslintrc.js file is like that

module.exports = {
    "extends": "airbnb"
};

and I install the packages like that

"eslint": "^5.9.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-loader": "^2.1.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",

I thought that ESLint can read JSX because the token "<" doesn't occur error. (When I change the extends section in .eslintrc.js file to "airbnb-base", It occurs error "ESLint Parsing Error: Unexpected token <. But now, the token "<" doesn't occur error)

However, my ESLint cannot read the JSX syntax line {variable}

Solution 1:^[1]

I've got the same error on Next.js.

These steps solved my issue:

1) Install babel-eslint:

npm install --save-dev babel-eslint

2) Add babel-eslint as a parser to eslint config

"parser": "babel-eslint"

My eslint config looks like this (.eslintrc):

{
  "env": {
    "browser": true,
    "es6": true,
    "commonjs": true,
    "node": true
  },
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 9,
    "ecmaFeatures": {
      "jsx": true
    },
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    "react/react-in-jsx-scope": 0,
    "no-console": 1
  }
}

Solution 2:^[2]

My .eslintr has this extra configuration to enable JSX

"parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  }

Solution 3:^[3]

For all of those coming to this post as of March 2020 or later, there have been some updates to babel and eslint that result in the accepted answer being out of date.

Basically, if you're writing React and not using a framework like Next.js or create-react-app, and you're needing to configure eslint to work appropriately by hand, here is a quick guide to follow.

Assumptions

This is assuming that you're starting a new project as of March 2020 and working with eslint 8.8 or later

What to Install

Run the following

npm install @babel/eslint-parser @babel/preset-react

If you don't have eslint-plugin-react installed, you'll want to install that too in order to utilize the recommended eslint settings for React projects.

Important: If you have babel-eslint installed or present in your package.json still, npm uninstall it.

How to Configure It

Example .eslintrc.js file (or .eslintrc or .eslintrc.json)

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  parser: '@babel/eslint-parser', // <<<< Important
  parserOptions: {
    requireConfigFile: false, // <<<< Allows you to skip Eslint complaining that you don't have a .babelrc file 
    babelOptions: {
      presets: ['@babel/preset-react'], // <<<< Important
    },
    ecmaFeatures: {
      jsx: true, // <<<< Important
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  rules: {},
};

After following these updates, my project started working as expected.

References

https://tjaddison.com/blog/2021/03/updating-babel-eslint-to-babeleslint-parser-for-react-apps/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	bekliev
Solution 2	Eponyme Web
Solution 3

'eslint "parsing error: Unexpected token {" in JSX

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]