CODEWITHSUNDEEP
reactjsjsxeslint
cbdeveloper
cbdeveloper

Reputation: 31485

ESLint React JSX Closing Tag / Parsing Error

I'm trying to set up ESLint on my React project.

Installed both eslint and eslint-plugin-react locally on my project.

Also using the VSCode ESLint extension (but I tried this without this extension and I also get the same linting errors).

Below you can see my .eslintconfig.json file and dependencies versions. I've got JSX enabled.

I keep getting errors on these closing tags.

What seems to be the problem? I can't make this errors go away and it's just simple closing tags.

Thanks a lot.

index.js file

app.js file

ESLint errors

.eslintconfig file

package.json file

Upvotes: 1

Views: 1871

Answers (1)

cbdeveloper
cbdeveloper

Reputation: 31485

It seems that it was being caused by some kind of conflict between the eslint package and some of babel packages, because when I did a clean install using only eslint and react that .eslintrc.json configuration worked perfectly.

I didn't have babel-eslint installed before and I was using the default parser that comes with eslint.

To solve the problem I had to install the babel-eslint package and use it as the parser for the eslint package. Everything is working fine now and those errors are gone.

Even though the babel-eslint docs says that you don't have to use it just because you're using babel, in my situation, using it along with babel and eslint solved the problem.

New eslint config file:

enter image description here

Upvotes: 1

Related Questions