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?

Longicorn

You need to use a parser that supports the object spread property proposal. – Satanism

Wast the Unexpected Token "import"? That was my issue. – Muldon

Answer 1

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.

Lachrymal

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

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 – Ez

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. – Sesquicarbonate

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

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. – Kazukokb

If using "parser": "babel-eslint", then showing other error like { } for destructing. – Yolanda

Pankaj - restructuring requires a babel plugin - such as @babel/preset-env. – Lachrymal

Even after adding this, a pre-requisite is that node version should be 8 or above. – Abell

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

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". – Yolandayolande

add parser where in the eslintrc file? – Pail

Answer 2

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

Impending

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. – Chivalrous

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

Instead of changing ecmaVersion: 2017 to ecmaVersion: 2020 I just changed "scripts": { "lint": "eslint ." } to "scripts": { "lint": "eslint" } in the file package.json . – Cellulose

@AlitonOliveira I think that just disables eslint entirely – Ithyphallic

Answer 3

"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

Rhachis

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

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

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

@Cinquecento where do you change eslint in tamper monkey? – Vikiviking

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

Fixed for me! Hurrah! Thanks. – Separatist

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. – Conception

Answer 4

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.

Firooc

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/… – Cene

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

ecmaFeatures has been deprecated. Use ecmaVersion – Lindsey

ecmaVersion: 2018 works without a warning with ESLint 5 – Annikaanniken

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! – Tryparsamide

I am facing same issue with js project. Above solution didn't work for me. Any ideas? – Matrix

Answer 5

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

Zygosis

👍 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"} – Behold

Answer 6

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

Threemaster

Answer 7

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

Declension

Works perfect. Also check browser support – Combative

Answer 8

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

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

Crenshaw

Answer 9

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

Marlyn

Answer 10

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

Louanneloucks

Answer 11

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

Almuce

Answer 12

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

Consecration

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

Answer 13

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:

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

Eadwina

Answer 14

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

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

Wageworker

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://mcmap.net/q/82878/-how-to-handle-eslint-error-during-type-casting-of-document-getelementbyid-method-in-typescript/470749 – Witha

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

Answer 15

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

Byelostok

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. – Witha

Answer 16

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

Will do the trick.

Colquitt

Answer 17

I had to update the ecmaVersion to "latest"

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

Missymist

Answer 18

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.

Fic

Answer 19

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.

Wheelwright