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?
This question is related to
javascript
reactjs
eslint
"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"
}
}
}
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.
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. babel-eslint is a package that saved me recently after reading this page and i decided to add this as an alternative solution for anyone coming later.
just add:
"parser": "babel-eslint"
to your .eslintrc
file and run npm install babel-eslint --save-dev
or yarn add -D babel-eslint
.
Please note that as the new Context API starting from React ^16.3
has some important changes, please refer to the official guide.
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
},
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:
$HOME/.nvm
folder which was not deleted when I removed nvm
earlier.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
}
}
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'
}
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"
}
Source: Stackoverflow.com