Kristoffer Nielsen Kristoffer Nielsen - 5 months ago 126
React JSX Question

ESlint: Parsing error: Unexpected token <

I have this function:

import React from 'react';
import FilterList from './Filter/FilterList';

export default function Sidebar() {
return (
<div>
<FilterList />
</div>
);
}


And included these packages:

"dependencies": {
"bootstrap": "^3.3.7",
"font-awesome": "^4.7.0",
"i18n-react": "^0.4.0",
"react": "^15.6.1",
"react-bootstrap": "^0.31.2",
"react-dom": "^15.6.1",
"react-fontawesome": "^1.6.1",
"react-router-dom": "^4.1.2",
"rxjs": "^5.4.3",
"superagent": "^3.5.2",
"webpack": "^3.5.4"},

"devDependencies": {
"eslint": "^4.4.1",
"eslint-config-airbnb-base": "^11.3.1",
"eslint-plugin-import": "^2.7.0",
"nwb": "0.18.x",
"nwb-less": "^0.6.0",
"yaml-loader": "^0.5.0"},


But when running lint I get this error:
error Parsing error: Unexpected token <

my .eslintrc file:

module.exports = {
"extends": "airbnb-base",
"plugins": [
"import"
]};


What am I doing wrong?

Answer Source

You are getting this error because eslint don't know how to handle JSX syntax, and you need eslint-plugin-react for this.

But you are also missing other plugins required for airbnb-eslint-config to work. Do what they say in docs which is:

npm info "eslint-config-airbnb@latest" peerDependencies

and install printed dependencies (as dev dependencies).

As of today I get this list:

{ eslint: '^3.19.0 || ^4.3.0',
  'eslint-plugin-jsx-a11y': '^5.1.1',
  'eslint-plugin-import': '^2.7.0',
  'eslint-plugin-react': '^7.1.0' }