ESLint React Parsing Error - meteor

Question

So I followed the instructions at guide.meteor.com to set up my package.json eslintConfig.
"eslintConfig": {
"plugins": [
"meteor"
],
"extends": [
"airbnb/base",
"plugin:meteor/recommended"
],
"rules": {
"meteor/eventmap-params": [
2,
{
"templateInstanceParamName": "instance"
}
],
"import/no-unresolved": [
2,
{
"ignore": [
"^meteor/"
]
}
],
"semi": [
"error",
"never"
]
}
}
It works fine until I try and use React.
main.js:
Meteor.startup(() => {
render(<App />, document.getElementById('render-target'))
})
That throws the error: [eslint] Parsing error: Unexpected token <
I have the react plugin:
"devDependencies": {
"eslint": "^2.9.0",
"eslint-config-airbnb": "^8.0.0",
"eslint-plugin-import": "^1.6.1",
"eslint-plugin-jsx-a11y": "^1.0.4",
"eslint-plugin-meteor": "^3.5.2",
"eslint-plugin-react": "^5.0.1"
}
I've tried following examples from Google but none of them helped. I've tried adding 'react' and 'eslint-plugin-react' to the plugins bit and nothing changed. I'm gobsmacked the solution wasn't provided in the ESLint section of the meteor guide. Any assistance would be appreciated.

Answer 1

Install babel-eslint and to your .eslintrc add "parser": "babel-eslint". You're missing the ES6 transpiling so eslint just crashes.

Answer 2

You don't need to install babel-eslint. Espree (native ESLint parser) fully supports ES6, ES7 and Object Rest/Spread.
The reason ESLint stopped parsing your file is because you haven't enabled jsx, so it will consider it as an incorrect syntax.
{
"ecmaFeatures": {
"ecmaVersion": 6,
"sourceType": "module",
"jsx": true
}
}
Add the above snippet to your config file and it should start working. For more information, you can read Specifying Parser Options