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}

@PraveenKumarPurushothaman Yes. It works perfectly right. I can compile my code using babel, and It works clearly on my browser. But, ESLint say that **Parsing Error**. — YouHoGeon, Dec 04 '18 at 09:26
@PraveenKumarPurushothaman My ESLint version is latest version(5.9.0). I checking it using a command "npm update" and [npmjs.org site](https://www.npmjs.com/package/eslint) — YouHoGeon, Dec 04 '18 at 09:31

Brian Le · Accepted Answer · 2019-03-16T17:31:38.210

33

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

edited Mar 16 '19 at 17:31

answered Dec 04 '18 at 09:32

Brian Le

2,646
18
28

Thank you for your answer. All issues has been resolved. Should I install `babel-eslint`, when I doesn't use `babel` ? – YouHoGeon Dec 04 '18 at 09:40
You should. You don't need to use babel to install it. It just helps eslint with parsing the code @YouHoGeon – Brian Le Dec 04 '18 at 09:41
I just did that and it broke a ton of other stuff. This answer may be out of date... – James Bender Sep 10 '19 at 14:46
@JamesBender don’t think so. Can you expand a little bit on your problem? – Brian Le Sep 10 '19 at 15:36
Potentially you may also need `"parser": "babel-eslint"` in your `.babelrc` along this this. – troy Jul 23 '20 at 20:42

score 15 · Answer 2 · answered Jan 02 '19 at 19:09

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

John T · Answer 3 · 2022-03-01T20:26:42.783

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/

score 2 · Answer 4 · answered Dec 04 '18 at 09:32

2

My .eslintr has this extra configuration to enable JSX

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

answered Dec 04 '18 at 09:32

Eponyme Web

966
5
10

1

Unfortunately, It works same. Thanks you for comment. – YouHoGeon Dec 04 '18 at 09:36

eslint "parsing error: Unexpected token {" in JSX

4 Answers4

Assumptions

What to Install

How to Configure It

References

Linked