[ESLint] Parsing error: unexpected token =>

Hi there!

I'm Arisa, a freelance Full Stack Developer.

I'm developing Lilac, an online school with hands-on Frontend e-books and tutoring👩‍💻

What is this article about?

This is a solution when I saw these errors.

Parsing error: unexpected token =>

Warning: React version not specified in eslint-plugin-react settings. See https://github.com/yannickcr/eslint-plugin-react#configuration .

Project environment & full configuration

• macOS: Catalina 10.15.7

• VS Code

• ESLint Version: ^7.15.0

• Node Version: v12.18.2

• npm Version: 6.14.5
  

"babel-eslint": "^10.1.0",
"babel-jest": "^22.4.1",
"babel-preset-env": "^1.6.1",
"concurrently": "^3.6.0",
"eslint": "^7.15.0",
"eslint-plugin-react": "^7.22.0",
"jest": "^22.4.2",
"webpack": "^3.10.0",
"webpack-dev-middleware": "^2.0.4",
"webpack-dev-server": "^2.11.1",
"webpack-hot-middleware": "^2.21.0"

A very simple project with JS(EcmaScript2016) with webpack, babel, jest and ESLint.

When did this error appear?

While I was running ESLint on my JS files.

How did it solve?

Reason

Lacking out of a package, babel-eslint to install.

Solution steps

1. Install babel-eslint locally

$ yarn add --dev babel-eslint

Source: https://github.com/babel/babel-eslint

1. Add "parser" config in .eslintrc.js

"parser": "babel-eslint"

Source: https://github.com/eslint/eslint/issues/10137

1. Remove unnecessary config for non-React project

// "extends": [
//     "eslint:recommended",
//     "plugin:react/recommended"
// ],

Source: https://github.com/yannickcr/eslint-plugin-react#configuration

No errors✨

Summary

The biggest mistake I had was the React config in a JS project.

Normally, I use React and didn't realize the wrong config for JS project🤦‍♀️

Hope this article was relevant for what you were looking for!

Happy new year & happy coding🎍

Comments

[Joff Tiquez]

Damn it, why do I always forget the parser. Thanks.

[Arisa Fukuzaki]

It happens often to me too 😅
Glad it helped!