eslint "parsing error: Unexpected token {" in JSX

Question

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}

Answer 1

Eslint on its own is not good enough. First install babel-eslint :

npm install --save-dev babel-eslint

Or with yarn:

yarn add -D babel-eslint

Then add to your .eslintrc file:

"parser": "babel-eslint"

You might want to install eslint-plugin-babel as well, but I believe this is not needed

Answer 2

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
  }
}

Answer 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/

Answer 4

My .eslintr has this extra configuration to enable JSX

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