DEV Community

loading...
Cover image for [ESLint] Parsing error: unexpected token =>

[ESLint] Parsing error: unexpected token =>

arisa_dev
Developer Relations Engineer at Storyblok. Love Aikido🥋 A free tech knowledge-sharing community, Lilac organizer💪 A host of Anonymous.fm https://dev.to/anonymousfm-arisa
Updated on ・2 min read

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 =>
Enter fullscreen mode Exit fullscreen mode
Warning: React version not specified in eslint-plugin-react settings. See https://github.com/yannickcr/eslint-plugin-react#configuration .
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

  1. Add "parser" config in .eslintrc.js
"parser": "babel-eslint"
Enter fullscreen mode Exit fullscreen mode

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

  1. Remove unnecessary config for non-React project
// "extends": [
//     "eslint:recommended",
//     "plugin:react/recommended"
// ],
Enter fullscreen mode Exit fullscreen mode

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🎍

Discussion (2)

Collapse
jofftiquez profile image
Jofferson Ramirez Tiquez

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

Collapse
arisa_dev profile image
arisa_dev Author

It happens often to me too 😅
Glad it helped!