ESLint Parsing error: Unexpected token

Question

With this code:

import React from 'react';
import { Link } from 'react-router';
import { View, NavBar } from 'amazeui-touch';

import * as Pages from '../components';

const {  Home, ...Components } = Pages;

I get this eslint error:

7:16  error  Parsing error: Unexpected token .. Why?

Here is my eslint config:

{
  "extends": "airbnb",
  "rules": {
    /* JSX */
    "react/prop-types": [1, {
      "ignore": ["className", "children", "location", "params", "location*"]
    }],
    "no-param-reassign": [0, {
      "props": false
    }],
    "prefer-rest-params": 1,
    "arrow-body-style": 0,
    "prefer-template": 0,
    "react/prefer-stateless-function": 1,
    "react/jsx-no-bind": [0, {
      "ignoreRefs": false,
      "allowArrowFunctions": false,
      "allowBind": true
    }],
  }
}

.... .... What's the problem?

You need to use a parser that supports the object spread property proposal. — Felix Kling, Mar 15 '16 at 05:38
Wast the Unexpected Token "import"? That was my [issue](https://stackoverflow.com/questions/54337576/). — Lonnie Best, Jan 24 '19 at 23:15

hanorine · Answer 1 · 2021-07-30T19:49:12.267

426

Unexpected token errors in ESLint parsing occur due to incompatibility between your development environment and ESLint's current parsing capabilities with the ongoing changes with JavaScripts ES6~7.

Adding the "parserOptions" property to your .eslintrc is no longer enough for particular situations, such as using

static contextTypes = { ... } /* react */

in ES6 classes as ESLint is currently unable to parse it on its own. This particular situation will throw an error of:

error Parsing error: Unexpected token =

The solution is to have ESLint parsed by a compatible parser, i.e @babel/eslint-parser or babel-eslint for babel version below v7.

just add:

"parser": "@babel/eslint-parser"

to your .eslintrc file and run npm install @babel/eslint-parser --save-dev or yarn add -D @babel/eslint-parser.

Please note that as the new Context API starting from React ^16.3 has some important changes, please refer to the official guide.

edited Jul 30 '21 at 19:49

answered Apr 15 '17 at 12:56

hanorine

7,256
3
14
18

11

`yarn add -D babel-eslint` for those using Yarn. – Neurotransmitter Sep 13 '18 at 16:53
24

For those who don't know where to add the `"parser": "babel-eslint"` config statement, it's in the `.eslintrc.json`. In my case, it's a JSON file, but basically, your .eslintrc file – Avid Programmer Jan 24 '19 at 21:57
3

Note * If you have "ejected" your create-react-app and you are adding eslint-ing to your IDE, babel-eslint is already applied. Just add the parser and your good to go. – Wes Duff Feb 19 '19 at 18:05
1

I found this article helpful too: https://grantnorwood.com/eslint-parsing-error-unexpected-token-visual-studio-code/ – gurun8 Nov 16 '19 at 13:40
I added the `"parser": "babel-eslint"` to my eslintrc file but got multiple errors instead. I am working with react and it tells me that My imported components were called but never used. Which is wierd. – David Essien Apr 10 '20 at 07:47
If using "parser": "babel-eslint", then showing other error like { } for destructing. – Pankaj May 05 '20 at 09:50
Pankaj - restructuring requires a babel plugin - such as `@babel/preset-env`. – hanorine May 06 '20 at 14:06
Even after adding this, a pre-requisite is that node version should be 8 or above. – Shabbir Essaji Dec 19 '20 at 09:45
7

`babel-eslint` is outdated, use `@babel/eslint-parser` – jackblk Jul 27 '21 at 08:49
1

solution works with NestJS too, just remove the quotes from "parser" and add it to your .eslintrc.js and then install babel. - instead "parser": "@babel/eslint-parser" do parser: "@babel/eslint-parser". – LaCodeM Oct 22 '21 at 15:16
add `parser` where in the eslintrc file? – john k Jun 10 '22 at 18:39

score 107 · Answer 2 · edited Nov 26 '20 at 07:29

107

In my case (im using Firebase Cloud Functions) i opened .eslintrc.json and changed:

"parserOptions": {
  // Required for certain syntax usages
  "ecmaVersion": 2017
},

to:

"parserOptions": {
  // Required for certain syntax usages
  "ecmaVersion": 2020
},

edited Nov 26 '20 at 07:29

Dmitry Grinko

13,806
14
62
86

answered Sep 26 '19 at 19:59

Alvin Konda

2,898
1
22
22

1

Changing `emcaVersion` to `2020` did the trick for me when receiving this error for using `var?.prop` in a React app. Thank you for posting. – Jason R Stevens CFA Dec 29 '20 at 02:26
1

changing `ecmaVersion: 2017` to `ecmaVersion: 2020` returned an error: `error Parsing error: Invalid ecmaVersion`. What else should I do besides changing to 2020? – Aliton Oliveira Apr 29 '21 at 00:54
8

Instead of changing `ecmaVersion: 2017` to `ecmaVersion: 2020` I just changed `"scripts": { "lint": "eslint ." }` to `"scripts": { "lint": "eslint" }` in the file **package.json** . – Aliton Oliveira Apr 29 '21 at 01:03

score 88 · Answer 3 · edited Dec 09 '18 at 17:53

88

"parser": "babel-eslint" helped me to fix the issue

{
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true,
            "modules": true,
            "experimentalObjectRestSpread": true
        }
    },
    "plugins": [
        "react"
    ],
    "extends": ["eslint:recommended", "plugin:react/recommended"],
    "rules": {
        "comma-dangle": 0,
        "react/jsx-uses-vars": 1,
        "react/display-name": 1,
        "no-unused-vars": "warn",
        "no-console": 1,
        "no-unexpected-multiline": "warn"
    },
    "settings": {
        "react": {
            "pragma": "React",
            "version": "15.6.1"
        }
    }
}

Reference

edited Dec 09 '18 at 17:53

Rajendran Nadar

4,962
3
30
51

answered Jul 25 '17 at 09:56

3

This answer doesn't add anything to @JaysQubeXon's answer. – cs01 Sep 14 '17 at 16:05
14

Actually it does - you get an example config (with parserOptions included) – kriskodzi Dec 12 '18 at 15:17
Great to have the full example++. It helped me to fix a TamperMonkey JS hints error. – brasofilo May 01 '20 at 22:02
@brasofilo where do you change eslint in tamper monkey? – Metin Dagcilar Jul 06 '20 at 15:17
@Metin, go to `Dashboard > Settings > Editor > Custom Linter Config` – brasofilo Jul 26 '20 at 21:36
Fixed for me! Hurrah! Thanks. – Jeremy Jan 23 '21 at 13:42
This example worked for me, because of `"parser": "babel-eslint"` instead of `@babel/eslint-parser`, even though I am on latest yarn and install with `yarn add -D @babel/eslint-parser`, so that did not work, but without the `@babel/` it worked. – Stephan Kristyn Jan 01 '22 at 23:01

Kevan Ahlquist · Answer 4 · 2016-03-15T15:56:36.147

84

ESLint 2.x experimentally supports ObjectRestSpread syntax, you can enable it by adding the following to your .eslintrc: docs

"parserOptions": {
  "ecmaVersion": 6,
  "ecmaFeatures": {
    "experimentalObjectRestSpread": true
  }
},

ESLint 1.x doesn't natively support the spread operator, one way to get around this is using the babel-eslint parser. The latest installation and usage instructions are on the project readme.

edited Mar 15 '16 at 15:56

answered Mar 15 '16 at 06:19

Kevan Ahlquist

5,375
1
17
25

2

That's not true. ESLint's default parser Espree does support spread, and even object rest spread (that's the only experimental feature that espree supports). For more information see this: http://eslint.org/docs/user-guide/configuring#specifying-parser-options – Ilya Volodin Mar 15 '16 at 14:54
You're right, my original answer only applied to ESLint 1.x, I updated it with info for 2.x – Kevan Ahlquist Mar 15 '16 at 15:58
1

`ecmaFeatures` has been deprecated. Use `ecmaVersion` – Richard Ayotte Aug 23 '18 at 22:45
9

`ecmaVersion: 2018` works without a warning with ESLint 5 – Tomasz Racia Sep 23 '18 at 20:18
1

I don't see a problem with this solution - it worked fine for me. It's better than having to install a new package as well! – Steam gamer Jan 17 '20 at 20:20
I am facing same issue with js project. Above solution didn't work for me. Any ideas? – Ankur Akvaliya May 22 '20 at 08:11

score 35 · Answer 5 · answered Apr 04 '19 at 04:04

35

I solved this issue by First, installing babel-eslint using npm

npm install babel-eslint --save-dev

Secondly, add this configuration in .eslintrc file

{
   "parser":"babel-eslint"
}

answered Apr 04 '19 at 04:04

Joee

1,834
18
19

4

However [babel-eslint](https://www.npmjs.com/package/babel-eslint) is no longer supported. Use its successor, [@babel/eslint-parser](https://www.npmjs.com/package/@babel/eslint-parser). `npm i -D @babel/core @babel/eslint-parser` then `{"parser: "@babel/eslint-parser"}` – Matt Norris Apr 09 '21 at 14:58

score 16 · Answer 6 · answered Mar 16 '20 at 16:12

Originally, the solution was to provide the following config as object destructuring used to be an experimental feature and not supported by default:

{
  "parserOptions": {
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true
    }
  }
}

Since version 5, this option has been deprecated.

Now it is enough just to declare a version of ES, which is new enough:

{
  "parserOptions": {
    "ecmaVersion": 2018
  }
}

score 15 · Answer 7 · answered Sep 23 '21 at 06:49

I'm using eslint for cloud-functions (development env: flutter 2.2.3).

In my case .eslintrc.json does not exist so I had to update the .eslintrc.js file by including parserOptions: { "ecmaVersion": 2020, }, property at the end of file. My updated .eslintrc.js file looks like this:

module.exports = {
  root: true,
  env: {
    es6: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "google",
  ],
  rules: {
    quotes: ["error", "double"],
  },
  
  // Newly added property
  parserOptions: {
    "ecmaVersion": 2020,
  },
};

Works perfect. [Also check browser support](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) — Shanimal, Feb 01 '22 at 17:35

score 12 · Answer 8 · edited Sep 01 '21 at 09:01

12

I solved this problem by setting this in .eslintrc.json file:

"extends": [
    ...,
    "plugin:prettier/recommended"
]

edited Sep 01 '21 at 09:01

Dharman

30,962
25
85
135

answered Sep 01 '21 at 08:55

Pazu

171
3
8

score 10 · Answer 9 · answered Feb 05 '20 at 23:07

Just for the record, if you are using eslint-plugin-vue, the correct place to add 'parser': 'babel-eslint' is inside parserOptions param.

  'parserOptions': {
    'parser': 'babel-eslint',
    'ecmaVersion': 2018,
    'sourceType': 'module'
  }

https://eslint.vuejs.org/user-guide/#faq

score 8 · Answer 10 · answered Mar 03 '21 at 17:18

In febrary 2021 you can use theese values

ecmaVersion - set to 3, 5 (default), 6, 7, 8, 9, 10, 11, or 12 to specify the version of ECMAScript syntax you want to use. You can also set to 2015 (same as 6), 2016 (same as 7), 2017 (same as 8), 2018 (same as 9), 2019 (same as 10), 2020 (same as 11), or 2021 (same as 12) to use the year-based naming.

https://eslint.org/docs/user-guide/configuring/language-options#specifying-parser-options

Pankaj Kumar · Answer 11 · 2022-05-15T19:49:08.857

5

For React + Firebase Functions

Go to : functions -> .eslintrc.js

Add it - parserOptions: { ecmaVersion: 8, },

module.exports = {
  root: true,
  env: {
    es6: true,
    node: true,
  },
  parserOptions: {
    ecmaVersion: 8,
  },
  extends: ["eslint:recommended", "google"],
  rules: {
    quotes: ["error", "double"],
  },
};

edited May 15 '22 at 19:49

answered May 14 '22 at 06:37

Pankaj Kumar

422
5
10

Mine was on version 11... all of 10 and below worked but not 11 – Crystal Aug 05 '22 at 22:36

score 3 · Answer 12 · answered Mar 03 '23 at 14:46

In my case adding "parser": "@typescript-eslint/parser", line into my .eslintrc file helped:

  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": ["tsconfig.json"],
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "modules": true,
      "experimentalObjectRestSpread": true
    }
  },

package.json in the same time has these 2 lines:

    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "@typescript-eslint/parser": "^5.0.0",

This was the only solution that worked for me! – Pryme8 Aug 30 '23 at 18:49 — Pryme8, Aug 30 '23 at 18:49

score 1 · Answer 13 · answered Oct 08 '19 at 11:47

If you have got a pre-commit task with husky running eslint, please continue reading. I tried most of the answers about parserOptions and parser values where my actual issue was about the node version I was using.

My current node version was 12.0.0, but husky was using my nvm default version somehow (even though I didn't have nvm in my system). This seems to be an issue with husky itself. So:

I deleted $HOME/.nvm folder which was not deleted when I removed nvm earlier.
Verified node is the latest and did proper parser options.
It started working!

score 1 · Answer 14 · answered May 05 '21 at 18:46

1

I was facing the issue despite implementing all the above solutions. When I downgraded the eslint version, it started working

answered May 05 '21 at 18:46

Pravin Varma

11
2

9

Your answer could have been helpful if you specified what version wasn't working and then what version you downgraded to in order to get it working. – Ryan May 13 '21 at 18:35

score 1 · Answer 15 · answered Nov 14 '22 at 07:09

1

.
.
{
    "parserOptions": {
    "ecmaVersion": 2020
},
.
.

Will do the trick.

answered Nov 14 '22 at 07:09

Krishan Pal

306
1
3

This worked! Thanks man :) – Rishav Sharma Jun 13 '23 at 07:24

score 1 · Answer 16 · answered Nov 28 '22 at 20:39

I had to update the ecmaVersion to "latest"

"parserOptions": {
    "parser": "@babel/eslint-parser",
    "sourceType": "module",
    "ecmaVersion": "latest",
    "ecmaFeatures": {
      "jsx": true,
      "experimentalObjectRestSpread": true
    },
    "requireConfigFile": false
  },

score 0 · Answer 17 · answered Apr 28 '21 at 09:36

0

I'm using typescript and I solve this error change parser

....
"prettier/prettier": [
            "error",
            {
                .....
                "parser": "typescript",
                .....
            }
        ],
....

answered Apr 28 '21 at 09:36

Dálcio Macuete Garcia

793
7
10

1

I'm unclear on where you're suggesting to make these changes. I'd appreciate you taking a look at my ESLint question here since you may be able to answer. Thanks! https://stackoverflow.com/q/67522592/470749 – Ryan May 13 '21 at 18:30
2

You must make these changes to the prettier / prettier rule in your eslint file – Dálcio Macuete Garcia May 18 '21 at 09:22

ESLint Parsing error: Unexpected token

17 Answers17

In febrary 2021 you can use theese values

Linked