ESLint Parsing error: Unexpected token
JavascriptReactjsEslintJavascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
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.
Solution 3 - Javascript
"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"
}
}
}
Solution 4 - Javascript
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
},
Solution 5 - Javascript
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"
}
Solution 6 - Javascript
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
}
}
Solution 7 - Javascript
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,
},
};
Solution 8 - Javascript
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'
}
Solution 9 - Javascript
I solved this problem by setting this in .eslintrc.json file:
"extends": [
...,
"plugin:prettier/recommended"
]
Solution 10 - Javascript
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
Solution 11 - Javascript
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 removednvm
earlier. - Verified node is the latest and did proper parser options.
- It started working!
Solution 12 - Javascript
I was facing the issue despite implementing all the above solutions. When I downgraded the eslint version, it started working
Solution 13 - Javascript
> I'm using typescript and I solve this error change parser
....
"prettier/prettier": [
"error",
{
.....
"parser": "typescript",
.....
}
],
....
Solution 14 - Javascript
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"],
},
};