DEV Community

Cover image for [ESLint] Parsing error: unexpected token =>
Arisa Fukuzaki
Arisa Fukuzaki

Posted on • Edited on

23 4

[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 =>
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🎍

Top comments (2)

Collapse
 
jofftiquez profile image
Joff Tiquez

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

Collapse
 
arisa_dev profile image
Arisa Fukuzaki

It happens often to me too 😅
Glad it helped!

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series