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

eslint "parsing error: Unexpected token {" in JSX


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


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


My .eslintr has this extra configuration to enable JSX

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