How do you fix ESLint Parsing error: Unexpected token error

Question

I get this eslint related error: Parsing error: Unexpected token

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 is the problem ?

You need to use a parser that supports the object spread property proposal. — Felix Kling
– Felix Kling, Commented Mar 15, 2016 at 5:38

Saiansh Singh · Accepted Answer · 2024-01-04 08:15:04Z

445

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. If you use pnpm, you can instead run pnpm 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 Jan 4, 2024 at 8:15

Saiansh Singh

7176 silver badges20 bronze badges

answered Apr 15, 2017 at 12:56

hanorine

7,8553 gold badges17 silver badges20 bronze badges

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

11 Comments

Neurotransmitter Over a year ago

yarn add -D babel-eslint for those using Yarn.

Avid Programmer Over a year ago

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

Wes Duff Over a year ago

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.

gurun8 Over a year ago

I found this article helpful too: grantnorwood.com/…

jackblk Over a year ago

babel-eslint is outdated, use @babel/eslint-parser

|

Dmitry Grinko · Accepted Answer · 2020-11-26 07:29:06Z

129

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, 2020 at 7:29

Dmitry Grinko

15.4k15 gold badges66 silver badges91 bronze badges

answered Sep 26, 2019 at 19:59

Alvin Konda

3,2882 gold badges25 silver badges25 bronze badges

3 Comments

Jason R Stevens CFA Over a year ago

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.

Aliton Oliveira Over a year ago

changing ecmaVersion: 2017 to ecmaVersion: 2020 returned an error: error Parsing error: Invalid ecmaVersion. What else should I do besides changing to 2020?

alicederyn Over a year ago

@AlitonOliveira I think that just disables eslint entirely

Rajendran Nadar · Accepted Answer · 2018-12-09 17:53:44Z

93

"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 9, 2018 at 17:53

Rajendran Nadar

5,4784 gold badges37 silver badges56 bronze badges

answered Jul 25, 2017 at 9:56

user8202629

7 Comments

cs01 Over a year ago

This answer doesn't add anything to @JaysQubeXon's answer.

kriskodzi Over a year ago

Actually it does - you get an example config (with parserOptions included)

brasofilo Over a year ago

Great to have the full example++. It helped me to fix a TamperMonkey JS hints error.

Metin Dagcilar Over a year ago

@brasofilo where do you change eslint in tamper monkey?

brasofilo Over a year ago

@Metin, go to Dashboard > Settings > Editor > Custom Linter Config

|

Kevan Ahlquist · Accepted Answer · 2016-03-15 15:56:36Z

85

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, 2016 at 15:56

answered Mar 15, 2016 at 6:19

Kevan Ahlquist

5,5411 gold badge20 silver badges25 bronze badges

6 Comments

Ilya Volodin Over a year ago

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: eslint.org/docs/user-guide/…

Kevan Ahlquist Over a year ago

You're right, my original answer only applied to ESLint 1.x, I updated it with info for 2.x

Richard Ayotte Over a year ago

ecmaFeatures has been deprecated. Use ecmaVersion

Tomasz Racia Over a year ago

ecmaVersion: 2018 works without a warning with ESLint 5

Steam gamer Over a year ago

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!

|

Joee · Accepted Answer · 2019-04-04 04:04:55Z

36

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 4, 2019 at 4:04

Joee

2,05422 silver badges21 bronze badges

1 Comment

Matt Norris Over a year ago

👍 However babel-eslint is no longer supported. Use its successor, @babel/eslint-parser. npm i -D @babel/core @babel/eslint-parser then {"parser: "@babel/eslint-parser"}

Vojtech Ruzicka · Accepted Answer · 2020-03-16 16:12:37Z

16

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

answered Mar 16, 2020 at 16:12

Vojtech Ruzicka

17.2k15 gold badges67 silver badges68 bronze badges

Comments

ark-tik · Accepted Answer · 2021-09-23 06:49:12Z

16

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,
  },
};

answered Sep 23, 2021 at 6:49

ark-tik

6177 silver badges16 bronze badges

1 Comment

Shanimal Over a year ago

Works perfect. Also check browser support

Dharman · Accepted Answer · 2021-09-01 09:01:24Z

13

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

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

edited Sep 1, 2021 at 9:01

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Sep 1, 2021 at 8:55

Pazu

3084 silver badges12 bronze badges

Comments

Cristiano · Accepted Answer · 2020-02-05 23:07:29Z

10

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

answered Feb 5, 2020 at 23:07

Cristiano

1342 silver badges4 bronze badges

Comments

Alexander Shestakov · Accepted Answer · 2021-03-03 17:18:46Z

8

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

answered Mar 3, 2021 at 17:18

Alexander Shestakov

1792 silver badges5 bronze badges

Comments

Jack Pts · Accepted Answer · 2023-03-03 14:46:55Z

8

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",

answered Mar 3, 2023 at 14:46

Jack Pts

1792 silver badges3 bronze badges

Comments

Pankaj Kumar · Accepted Answer · 2022-05-15 19:49:08Z

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, 2022 at 19:49

answered May 14, 2022 at 6:37

Pankaj Kumar

5567 silver badges10 bronze badges

1 Comment

Crystal Over a year ago

Mine was on version 11... all of 10 and below worked but not 11

Philip Sopher · Accepted Answer · 2022-11-28 20:39:24Z

2

I had to update the ecmaVersion to "latest"

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

answered Nov 28, 2022 at 20:39

Philip Sopher

8012 gold badges10 silver badges22 bronze badges

Comments

Asim K T · Accepted Answer · 2019-10-08 11:47:19Z

1

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!

answered Oct 8, 2019 at 11:47

Asim K T

18.4k14 gold badges84 silver badges108 bronze badges

Comments

Dálcio Macuete Garcia · Accepted Answer · 2021-04-28 09:36:06Z

1

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

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

answered Apr 28, 2021 at 9:36

Dálcio Macuete Garcia

1,05910 silver badges11 bronze badges

2 Comments

Ryan Over a year ago

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! stackoverflow.com/q/67522592/470749

Dálcio Macuete Garcia Over a year ago

You must make these changes to the prettier / prettier rule in your eslint file

Pravin Varma · Accepted Answer · 2021-05-05 18:46:29Z

1

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

answered May 5, 2021 at 18:46

Pravin Varma

112 bronze badges

1 Comment

Ryan Over a year ago

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.

Krishan Pal · Accepted Answer · 2022-11-14 07:09:36Z

1

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

Will do the trick.

answered Nov 14, 2022 at 7:09

Krishan Pal

4264 silver badges3 bronze badges

Comments

Bhairesh M · Accepted Answer · 2024-04-02 11:50:15Z

In my case I was getting "parsing error: unexpected token" from ESLint when trying to lint my code, It was happening with a JSON file, there's a simple explanation. ESLint is built for JavaScript, and JSON's curly braces and commas can throw it off.

Here's how to handle this:

Exclude JSON Files: Unless you specifically need to lint your JSON data, tell ESLint to ignore it. Edit your ESLint configuration file (.eslintrc.json or .eslintrc.js) and add "data.json" (or other JSON files) to the "ignorePatterns" list. This tells ESLint to leave those files alone.

or

Lint Your JSON:

If you want to enforce formatting or validation rules for your JSON, you can use a plugin like eslint-plugin-json. Install it with npm install --save-dev eslint-plugin-json, then add "json" to the "plugins" list in your ESLint configuration.

Remember, choose the approach that fits your needs. Excluding JSON files is the simplest way to go, but eslint-plugin-json gives you more control over your JSON data's structure.

Allen · Accepted Answer · 2024-03-05 03:57:51Z

0

If you have a similar error, deleting your yarn.lock file (or package.lock if you're not using yarn) and then running yarn install (or npm install) again may fix it.

answered Mar 5, 2024 at 3:57

Allen

2,9072 gold badges33 silver badges36 bronze badges

Collectives™ on Stack Overflow

How do you fix ESLint Parsing error: Unexpected token error

19 Answers 19

11 Comments

3 Comments

7 Comments

6 Comments

1 Comment

Comments

1 Comment

Comments

Comments

In febrary 2021 you can use theese values

Comments

Comments

1 Comment

Comments

Comments

2 Comments

1 Comment

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

19 Answers 19

11 Comments

3 Comments

7 Comments

6 Comments

1 Comment

Comments

1 Comment

Comments

Comments

In febrary 2021 you can use theese values

Comments

Comments

1 Comment

Comments

Comments

2 Comments

1 Comment

Comments

Comments

Comments

Linked

Related