ESlint: Parsing error: Unexpected token <

Question

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?

please add more information about your presets-plugins, can you share your .babelrc? are you using eslint-babel? — locropulenton
– locropulenton, Commented Aug 17, 2017 at 6:11
this seems to be more like an error that would arise from your .babelrc or webpack configuration then ESlint — Shubham Khatri
– Shubham Khatri, Commented Aug 17, 2017 at 6:22
could be. I didn't really setup webpack. If I remove the webpack package I get the same error. I guess webpack is used by nwb. — Kristoffer
– Kristoffer, Commented Aug 17, 2017 at 6:28

Tomasz Mularczyk · Accepted Answer · 2017-08-17 07:47:04Z

5

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

edited Aug 17, 2017 at 7:47

answered Aug 17, 2017 at 7:41

Tomasz Mularczyk

36.4k19 gold badges118 silver badges176 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jay Bienvenu Over a year ago

Does this answer also apply if one is using Vue instead of React?

Tomasz Mularczyk Over a year ago

@JayBienvenu for Vue you are going to probably use this: eslint.vuejs.org

fjplaurr · Accepted Answer · 2020-02-23 18:07:46Z

1

If you are using nmp5+, one shortcut would be:

npx install-peerdeps --dev eslint-config-airbnb

The -peerdeps refers to all the dependences.

answered Feb 23, 2020 at 18:07

fjplaurr

1,9503 gold badges22 silver badges40 bronze badges

Comments

zoltankundi · Accepted Answer · 2022-07-26 11:06:26Z

1

If every peer dependency is added and you still get this error, be sure to check that your eslint config has the following options:

"parserOptions": {
    "ecmaFeatures": {
        "jsx": true,
        "modules": true
    }
}

answered Jul 26, 2022 at 11:06

zoltankundi

2511 gold badge2 silver badges14 bronze badges

1 Comment

Ms.Tamil Feb 13 at 10:17

Thanks, it worked. Didn't expect it to since I have .js file instead of .jsx.

Collectives™ on Stack Overflow

ESlint: Parsing error: Unexpected token <

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related