ESLint "Unexpected token )" also eclipsing other problems in file

Question

I'm implementing ESLint along with Prettier in a React project, and the below code is giving a frustrating parsing error.

ReactDOM.render(
  <TierComparisonApp {...tier_comparison_app.dataset} />,
  document.getElementById('tier_comparison_app'),
); <-- Parsing error: Unexpected token )

Oddly, when I remove the comma after the second argument passed to render, that parsing error goes away, revealing an expected problem in missing that comma, but also another problem with tier_comparision_app being undefined.

ReactDOM.render(
  <TierComparisonApp {...tier_comparison_app.dataset} />, <-- (correctly  caught as undefined)
  document.getElementById('tier_comparison_app') <-- (correctly saying to insert a comma)
);

Stranger yet, making the aforementioned change also reveals problems much earlier in the file having to do with using == instead of ===, which is also expected behavior. Any ideas as to what could be causing this? I've created a Pastebin of my .eslintrc.json because it is a little dense with rules.

score 0 · Answer 1 · answered Apr 02 '21 at 19:25

So immediately after writing this I realized that I hadn't set my parser to babel-eslint in my .eslintrc.json file, as such:

"parser": "babel-eslint",

Very straightforward solution, and makes total sense as to why ESLint would be encountering a parsing problem. Obviously, you'll need to install babel-eslint with your favorite package manager. I'd recommend this to anyone else running into parsing problems they wouldn't expect, and hopefully me still posting this with an answer can be helpful to someone down the line.

ESLint "Unexpected token )" also eclipsing other problems in file

1 Answers1