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

Improve this question
4
  • But there's no error in the code. It works right? Commented Dec 4, 2018 at 9:22
  • @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. Commented Dec 4, 2018 at 9:26
  • Can you see if there are any ESLint upgrades? Commented Dec 4, 2018 at 9:27
  • @PraveenKumarPurushothaman My ESLint version is latest version(5.9.0). I checking it using a command "npm update" and npmjs.org site Commented Dec 4, 2018 at 9:31

4 Answers 4

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thank you for your answer. All issues has been resolved. Should I install babel-eslint, when I doesn't use babel ?
You should. You don't need to use babel to install it. It just helps eslint with parsing the code @YouHoGeon
I just did that and it broke a ton of other stuff. This answer may be out of date...
@JamesBender don’t think so. Can you expand a little bit on your problem?
Potentially you may also need "parser": "babel-eslint" in your .babelrc along this this.
15

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 } }
Improve this answer

Comments

3

My .eslintr has this extra configuration to enable JSX

"parserOptions": { "ecmaFeatures": { "jsx": true } }
Improve this answer

1 Comment

Unfortunately, It works same. Thanks you for comment.
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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.