Javascript: eslint-config-airbnb error

[AdamBrodzinski]

I've added "extends": "eslint-config-airbnb" to an empty .eslintrc file and when I run eslint app I get the following error. If I remove the extends and paste in the node_modules .eslint contents, it works fine. Any ideas? I ran npm install several times

Error: Cannot find module 'eslint-config-airbnb'
Referenced from: /Users/adam/projects/webpack-boiler/.eslintrc
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at loadConfig (/usr/local/lib/node_modules/eslint/lib/config.js:96:48)
    at /usr/local/lib/node_modules/eslint/lib/config.js:123:46
    at Array.reduceRight (native)
    at loadConfig (/usr/local/lib/node_modules/eslint/lib/config.js:111:36)
    at getLocalConfig (/usr/local/lib/node_modules/eslint/lib/config.js:225:23)
    at Config.getConfig (/usr/local/lib/node_modules/eslint/lib/config.js:363:22)
webpack-boiler|⇒

{
  "name": "meteor-webpack-react",
  "version": "0.0.1",
  "description": "A port of simple-todos to Webpack/React on the frontend",
  "repository": "https://www.github.com/jedwards1211/meteor-webpack-react",
  "devDependencies": {
    "babel-eslint": "^4.0.5",
    "babel-loader": "^5.1.2",
    "css-loader": "^0.15.3",
    "eslint": "^1.1.0",
    "eslint-config-airbnb": "0.0.7",
    "eslint-plugin-react": "^3.2.1",
    "node-libs-browser": "^0.5.2",
    "react-hot-loader": "^1.2.7",
    "react-router": "^0.13.3",
    "style-loader": "^0.12.3",
    "webpack": "^1.10.1",
    "webpack-dev-server": "^1.10.1"
  },
  "dependencies": {
    "babel": "^5.6.14",
    "babel-core": "^5.6.20",
    "classnames": "^2.1.3",
    "react": "^0.13.3",
    "react-router": "^0.13.3",
    "lodash": "^3.10.0"
  },
  "scripts": {
    "dev": "scripts/dev.sh",
    "prod": "scripts/prod.sh",
    "build": "scripts/build.sh",
    "test-built": "scripts/test-built.sh"
  },
  "author": "",
  "license": "MIT"
}

{
  "extends": "eslint-config-airbnb"
}

[ljharb]

You still have to manually add the package to your package.json - try npm install --save eslint-config-airbnb

[AdamBrodzinski]

Thanks for the fast reply!

I tried npm install --save eslint-config-airbnb as well with the same result. I did add it to the package.json, it's on line 11 under dev dependencies (also tried under reg. deps.) The module is also in node_modules.

Any other ideas?

[ljharb]

ah, you're right, i see it there. However, when you run eslint app you're not running the locally installed version of eslint - the local one should only be run under an npm run-script, which effectively adds node_modules/.bin to the PATH for you. Try ./node_modules/.bin/eslint app to confirm?

[AdamBrodzinski]

Ooooh, that makes sense! It does run when I use ./node_modules/.bin/eslint app. However then syntastic breaks and won't lint.

However this lead to me this issue which says that if I need to run eslint globally then I also need to install eslint-config-airbnb globally. I did this and now it works great. I can use your solution for my makefile and the global for syntastic (just have to make sure they're in sync!).

Thanks!

[ljharb]

I'd strongly recommend not using global installs (per https://github.com/eslint/eslint/issues/1238#issuecomment-55172447) but as long as it's working for you, yay! :-)

[AdamBrodzinski]

Yea I agree; it's a recipe for a bad time :laughing: i'm going to try and look into not using them for linting in Vim... gotta pour through the syntastic docs.

_Thanks_ btw, you guys (and girls!) are awesome for open sourcing this stuff! :beers:

[simongfxu]

Still got this error when using atom with eslint local install.
I am using this repo https://github.com/kriasoft/react-starter-kit.

Error: Cannot find module 'eslint-config-airbnb' Referenced from: /Users/xugaofan/developer/git/MyApp/.eslintrc
Error: Cannot find module 'eslint-config-airbnb'
Referenced from: /Users/xugaofan/developer/git/MyApp/.eslintrc
    at Function.Module._resolveFilename (module.js:334:15)
    at Function.Module._load (module.js:284:25)
    at Module.require (module.js:363:17)
    at require (module.js:382:17)
    at readConfigFromFile (/Users/xugaofan/.atom/packages/linter-eslint/node_modules/eslint/lib/config.js:155:44)
    at loadConfig (/Users/xugaofan/.atom/packages/linter-eslint/node_modules/eslint/lib/config.js:176:22)
    at /Users/xugaofan/.atom/packages/linter-eslint/node_modules/eslint/lib/config.js:207:46
    at Array.reduceRight (native)
    at loadConfig (/Users/xugaofan/.atom/packages/linter-eslint/node_modules/eslint/lib/config.js:191:36)
    at getLocalConfig (/Users/xugaofan/.atom/packages/linter-eslint/node_modules/eslint/lib/config.js:321:23)

[kelong]

Same problem here, both Windows 10 and OSX El Capitan, only in Atom, the application is working properly, live reload also working (using npm start).
Tried:
npm install -g --save-dev eslint-config-airbnb babel-eslint eslint-plugin-react eslint
npm install --save-dev eslint-config-airbnb babel-eslint eslint-plugin-react eslint

And:
npm install -g --save eslint-config-airbnb
/Users/maciej/npm/lib
├── UNMET PEER DEPENDENCY eslint@>=1.0.0
└── [email protected]

npm WARN EPEERINVALID [email protected] requires a peer of eslint@>=1.0.0 but none was installed.

[ljharb]

@kelong what version of eslint do you have installed? you have to manually install peer deps in npm 3.

[kelong]

eslint 1.9.0
npm --version
3.3.9

How ?

[ljharb]

npm install -g eslint (note that --save and --save-dev don't apply to global installs)

[kelong]

I did that already, same problem
npm install -g --save-dev eslint-config-airbnb babel-eslint eslint-plugin-react eslint

[ljharb]

I don't use Atom so I can't help there - hopefully someone who does will chime in.

[justinsisley]

@kelong, see this issue. I believe we're having the same problem, and it should be resolved shortly.

[kelong]

@justinsisley, ok thanks, will wait. I see that also jshint is not working with react, lots of warnings (es6)

[justinsisley]

@kelong, go ahead and update your Atom plugins. The issue should be resolved.

[kelong]

@justinsisley, thanks, I got another problem with $PATH, but I installed atom-fix-path package.
And had to remove jshint (not ready for es6 yet).
Now everything is fine.

[gunar]

@AdamBrodzinski did you end up finding a way to solve this without instaling eslint-config-airbnb globally? thanks!

[geekjuice]

@gunar If you are referring to using this with syntastic, a trick I learned recently is to just configure b:syntastic_javascript_eslint_exec to point to the locally installed version of eslint if it exists otherwise fallback to the globally installed:

function! SyntasticESlintChecker()
  let l:npm_bin = ''
  let l:eslint = 'eslint'

  if executable('npm')
      let l:npm_bin = split(system('npm bin'), '\n')[0]
  endif

  if strlen(l:npm_bin) && executable(l:npm_bin . '/eslint')
    let l:eslint = l:npm_bin . '/eslint'
  endif

  let b:syntastic_javascript_eslint_exec = l:eslint
endfunction


let g:syntastic_javascript_checkers = ["eslint"]

autocmd FileType javascript :call SyntasticESlintChecker()

Credit to @gcorne

To run the locally installed version of eslint without typing ./node_modules/.bin/eslint ..., you can set up a script in package.json:

// package.json
{
    "scripts": {
      "lint": "eslint app"
    }
}

then just run npm run lint. If you installed eslint locally, it will use that executable otherwise look for a globally installed instance (or anything in your $PATH variable).

Updated: Fixed the vim function

[gunar]

@geekjuice thank you very much. that's precisely what I was looking for.

It works, but I had to change b:syntastic_javascript_eslint_exec for g:syntastic_javascript_eslint_exec (note g:) and put call SyntasticESlintChecker(). Is that what you intended?

[geekjuice]

Ah, yea. Good catch :+1:

[gcorne]

@gunar if you use autocmd FileType javascript :call SyntasticESlintChecker() to call the SyntasticESlintChecker, it will set the eslint executable when opening the file only for that buffer, which can be handy if you jump around multiple projects in the same vim session. That is why b: was used instead of g: above.

[gunar]

@gcorne yup that makes sense. Will do. Thank you!

[amjad-wp]

(
  export PKG=eslint-config-airbnb;
  npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)

Worked perfect for me :+1:

[darcyjunior]

Npm url: https://www.npmjs.com/package/eslint-config-airbnb-base

( export PKG=eslint-config-airbnb-base; npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest" )

.eslintrc.json before:

{ "extends": "airbnb" }

after:

{ "extends": "airbnb-base" }

Worked for me...

[callamwilliams]

{ "extends": "airbnb" } - this is airbnb config with all react support etc
{ "extends": "airbnb-base" } - this is airbnb config for just JS, and is now deprecated

What you need to run is npx install-peerdeps --dev eslint-config-airbnb

[hmagdy]

In my case I fixed it by:
before:

npx eslint . --fix
Oops! Something went wrong! :(
ESLint: 6.1.0.
ESLint couldn't find the plugin "eslint-plugin-import".

run this:

rm -rf node_modules
npm install eslint --save
npm install eslint-config-airbnb-base --save
npm install eslint-plugin-markdown --save
npm install eslint-plugin-import --save
npm i
npx eslint --version
(should be less than 7)

it works:

npx eslint . --fix

Reason:
It seems if libs listed under dev reps, eslint got updated automatically to 7.0 as I explain here later.

[j-monteiro]

I don't know if this is the best solution but it seems that installing "eslint-plugin-import@latest" did solve the problem, at least for me. Thanks, @hmagdy !!

Note: I didn't install eslint-plugin-markdown

[SimonIMG]

I was having issues with this on my GatsbyJS site in VS Code.

As per https://www.npmjs.com/package/eslint-config-airbnb I ran

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

This requires npm 5+

[EasonWang01]

If it's mono repo or multiple projects in side same folder, cd to current working repo then reopen VSCode might help.

[hmagdy]

Another issue I found today, it was the sort of installing under both dependencies and devDependencies:

[ljharb]

Indeed, all eslint things should generally be dev deps.

[hmagdy]

It's not working from my side now if listed under dev deps

  "dependencies": {
    "swagger-ui-express": "^4.1.4"
  },
  "devDependencies": {
    "eslint": "^6.8.0",
    "eslint-config-airbnb-base": "^14.1.0",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-markdown": "^1.0.2"
  }

return

npx eslint . --fix
npx: installed 136 in 15.698s

Oops! Something went wrong! :(

ESLint: 7.0.0

ESLint couldn't find the config "airbnb-base" to extend from. Please check that the name of the config is correct.

The config "airbnb-base" was referenced from the config file in "/Repo/.eslintrc.js".

If you still have problems, please stop by https://gitter.im/eslint/eslint to chat with the team.

But if I use it under reps, it is working fine

  "dependencies": {
    "eslint": "^6.8.0",
    "eslint-config-airbnb-base": "^14.1.0",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-markdown": "^1.0.2",
    "swagger-ui-express": "^4.1.4"
  }

[ljharb]

@hmagdy well sure, you're using a globally installed eslint 7 and you have a locally installed eslint 6. Do not have any global installs, let alone eslint ones - run it locally via an npm run-script or npx eslint.

[ljharb]

(Although I see npx eslint but it says version 7, and the airbnb config does not work with version 7 yet, and your package.json says v6, so i'm confused)

[hmagdy]

Oh shit here what we have, it seems if libs listed under dev reps, eslint got updated automatically to 7.0 🤦

--> PUT libs under deps 

$ rm -rf node_modules/
$ npm i
$ npx eslint --version
v6.8.0


--> PUT libs under dev deps 

$ npm i
$ npx eslint --version
v6.8.0
$ rm -rf node_modules/
$ npm i
$ npx eslint --version
v7.0.0