CODEWITHSUNDEEP
reactjscreate-react-appeslintbabel-eslint
Alexandr Tovmach
Alexandr Tovmach

Reputation: 3179

Error: Failed to load parser 'babel-eslint' declared in '.eslintrc': Cannot find module 'babel-eslint' in create-react-app

Trying to install eslint into create-react-app, but get next error when running linter:

enter image description here]

Here is my .eslintrc config file:

{
  "extends": ["airbnb", "prettier", "prettier/react"],
  "plugins": ["prettier"],
  "parser": "babel-eslint"
}

If install babel-eslint manually it'll potentially produce another error based on package conflict between project and react-scripts dependencies: enter image description here

Upvotes: 28

Views: 52068

Answers (12)

Joe Rush
Joe Rush

Reputation: 137

This works like Charm

npm update eslint

Upvotes: 0

Sam Newbold
Sam Newbold

Reputation: 11

I have yet another "this is what worked for me" answer. Like others my issue is definitely related to the deprecation of babel-eslint. My specific issue was that eslint-config-react-app was marked as a direct dependency, which I hadn't upgraded as part of upgrading a major version of react-scripts, somehow this left me with a version of eslint-config-react-app that was expecting babel-eslint, but only @babel/eslint-parser installed. For a while I thought the solution was removing the old eslint-config-react-app, but several iterations later I found I needed the direct dependency.

$npm ls eslint-config-react-app
[email protected] /srv/
├── [email protected]
└─┬ [email protected]
  └── [email protected]

$ npm i eslint-config-react-app

added 1 package, and audited 2909 packages in 6s

$ npm ls eslint-config-react-app
[email protected] /srv/
├── [email protected]
└─┬ [email protected]
  └── [email protected] deduped

Upvotes: 1

Chadrack Kyungu
Chadrack Kyungu

Reputation: 63

As for me i simply install this npm install [email protected] babel-eslint@8 - g and it works for me

Upvotes: 0

mayuresh pawar
mayuresh pawar

Reputation: 11

Just add @babel/eslint-parser in .eslintrc

Upvotes: 0

Mahdiyeh
Mahdiyeh

Reputation: 1193

Did you install @babel/eslint-parser or eslint-parser? In my case I had to use @babel/eslint-parser and .eslintrc looks like this:

"parser": "@babel/eslint-parser",

Upvotes: 26

kaushalyap
kaushalyap

Reputation: 13667

❯ yarn add -D babel-eslint 
yarn add v1.22.15
[1/4] Resolving packages...
warning [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.

babel-eslint seems deprecated and package is now provided as an ES module under babel, so remove babel-eslint and instead install @babel/eslint-parser

yarn remove babel-eslint
yarn add -D @babel/eslint-parser

Upvotes: 3

ch271828n
ch271828n

Reputation: 17653

For me, it is because that dependency is really not installed... I just followed the GatsbyJS's official guide, and it is not installed (not sure why that guide is not complete).

So just: yarn add -D babel-eslint

Upvotes: 2

Omar
Omar

Reputation: 452

A little late here but thought I would share what got me going...

I completely dismissed the error output which tells me where the .eslintrc file (that is looking for said package) lives. As you can see... I had some random .eslintrc living outside of my project which was somehow getting picked up.

Failed to load parser 'babel-eslint' declared in '../.eslintrc': Cannot find module 'babel-eslint'

Solution:

Deleting this package ended up fixing the error for me. Not sure how that file got there but by mistake in a previous project.

I suspect that it has something to do with installing babel-eslint and eslint globally.

Upvotes: 2

Haythem MISSAOUI
Haythem MISSAOUI

Reputation: 21

yarn add eslint --save-dev solved that issue for me!

Upvotes: 2

boomchickawawa
boomchickawawa

Reputation: 566

Running eslint on your projects root folder eslint . will display the missing packages that you might need to install and that worked well for me.

Upvotes: 0

Oleg
Oleg

Reputation: 1140

In my case solution was just run npm install eslint --save-dev for update eslint version

Upvotes: 6

Alexandr Tovmach
Alexandr Tovmach

Reputation: 3179

To fix this issue just reuse babel-eslint dependency from react-scripts, that already installed. Update your config:

{
  "extends": ["airbnb", "prettier", "prettier/react"],
  "plugins": ["prettier"],
  "parser": "react-scripts/node_modules/babel-eslint"
}

Upvotes: 19

Related Questions