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?
Best Answer
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
in ES6 classes as ESLint is currently unable to parse it on its own. This particular situation will throw an error of:
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:
to your
.eslintrc
file and runnpm install @babel/eslint-parser --save-dev
oryarn 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.