Why (and How Can I FIx) ESLint import/no-extraneous-dependencies Failures on Installed Packages?

Question

When I run ESLint I get the following errors:

1:13  error  'joi' should be listed in the project's dependencies. Run 'npm i -S joi' to add it        import/no-extraneous-dependencies 2:16  error  'lodash' should be listed in the project's dependencies. Run 'npm i -S lodash' to add it  import/no-extraneous-dependencies 

However, I have both of those module installed and in my package.json:

"joi": "^10.4.2", // Some other packages "lodash": "^4.17.2", 

and running:

npm i -S joi 

doesn't help or fix the issue. Also I have tons of other packages in my package.json, and only those two have issues. It's possible that this is a bug, but ESLint has so many eyes on it I think it's more likely that I'm doing something wrong ... only I can't figure out what (those packages look just the same as any other in my package.json).

Can anyone suggest what I might be doing (inadvertently) to make ESLint complaint about those two packages, and only those two packages, despite them being installed?

EDIT

Here's my package.json (with a few not-relevant identifying bits removed):

{   "name": "foo",   "version": "1.0.0",   "engines": {     "node": "6.9.4"   },   "scripts": {     "some": "scripts",   },   "ava": {     "babel": "inherit",     "require": "babel-register",     "serial": true,     "verbose": true   },   "devDependencies": {     "@3846masa/axios-cookiejar-support": "0.0.4",     "apidoc": "^0.17.5",     "ava": "^0.17.0",     "babel-eslint": "^7.1.1",     "babel-plugin-module-alias": "^1.6.0",     "babel-react-render-defender": "^1.1.1",     "chai": "^3.5.0",     "chai-enzyme": "^0.6.1",     "del": "^2.2.2",     "enzyme": "^2.6.0",     "eslint": "^3.19.0",     "eslint-config-airbnb": "^13.0.0",     "eslint-import-resolver-babel-module": "^3.0.0",     "eslint-plugin-babel": "^4.0.0",     "eslint-plugin-import": "^2.2.0",     "eslint-plugin-jsx-a11y": "^2.2.3",     "eslint-plugin-react": "^6.8.0",     "jsdom": "^9.9.1",     "nodemon": "^1.11.0",     "proxyquire": "^1.7.10",     "react-addons-test-utils": "^15.4.1",     "react-hot-loader": "^3.0.0-beta.6",     "really-need": "^1.9.2",     "redux-devtools-extension": "^1.0.0",     "s3rver": "^1.0.2",     "sinon": "^1.17.6",     "style-loader": "^0.13.1",     "supertest": "^2.0.1"   },   "dependencies": {     "autoprefixer": "^6.5.4",     "ava": "^0.17.0",     "aws-sdk": "^2.7.21",     "axios": "^0.15.3",     "babel-core": "^6.20.0",     "babel-loader": "^6.2.9",     "babel-plugin-lodash": "^3.2.11",     "babel-plugin-module-resolver": "^2.5.0",     "babel-plugin-transform-decorators-legacy": "^1.3.4",     "babel-plugin-transform-object-rest-spread": "^6.22.0",     "babel-plugin-transform-runtime": "^6.15.0",     "babel-preset-decorators-legacy": "^1.0.0",     "babel-preset-es2015": "^6.18.0",     "babel-preset-react": "^6.16.0",     "babel-runtime": "^6.20.0",     "bluebird": "^3.4.6",     "body-parser": "^1.17.1",     "celebrate": "^4.0.0",     "chai-diff": "^1.0.1",     "classnames": "^2.2.5",     "clipboard": "^1.6.1",     "compression": "^1.6.2",     "cookie-parser": "^1.4.3",     "cookie-session": "^2.0.0-alpha.2",     "core-decorators": "^0.15.0",     "csrf": "^3.0.6",     "css-mqpacker": "^5.0.1",     "cssnano": "^3.9.1",     "debug": "^2.6.0",     "dotenv": "^2.0.0",     "express": "^4.14.0",     "express-sanitizer": "^1.0.2",     "extract-text-webpack-plugin": "^1.0.1",     "faker": "^3.1.0",     "feedparser": "^2.0.0",     "file-loader": "^0.10.0",     "flatpickr": "^2.6.1",     "helmet": "^3.5.0",     "html-webpack-plugin": "^2.28.0",     "immutability-helper": "^2.1.1",     "joi": "^10.4.1",     "js-cookie": "^2.1.3",     "json-loader": "^0.5.4",     "jsonp-promise": "^0.1.2",     "knex": "0.12.9",     "libxmljs": "^0.18.4",     "lodash": "^4.17.2",     "lodash-webpack-plugin": "^0.11.0",     "moment": "^2.18.1",     "morgan": "^1.7.0",     "node-fetch": "^1.6.3",     "pg": "^6.1.2",     "plist": "^2.0.1",     "postcss": "^5.2.6",     "postcss-custom-media": "^5.0.1",     "postcss-custom-properties": "^5.0.1",     "postcss-import": "^9.0.0",     "postcss-loader": "^1.2.1",     "raw-loader": "^0.5.1",     "rc-time-picker": "^2.3.3",     "react": "^15.4.1",     "react-addons-shallow-compare": "^15.4.2",     "react-dnd": "^2.2.3",     "react-dnd-html5-backend": "^2.2.3",     "react-dom": "^15.4.1",     "react-flatpickr": "^3.3.0",     "react-json-tree": "^0.10.1",     "react-modal": "^1.6.5",     "react-redux": "^5.0.0",     "react-router": "^3.0.0",     "react-router-redux": "^4.0.7",     "react-sortable-hoc": "^0.6.1",     "react-virtualized": "^8.11.4",     "recompose": "^0.23.1",     "redux": "^3.6.0",     "redux-actions": "^1.2.0",     "redux-debounce": "^1.0.1",     "redux-logger": "^2.7.4",     "redux-promise": "^0.5.3",     "redux-thunk": "^2.1.0",     "reselect": "^2.5.4",     "stylelint": "^7.7.0",     "svg-react-loader": "^0.4.0-beta.2",     "svgo": "^0.7.1",     "to-exports": "^0.1.0",     "twit": "^2.2.5",     "url-loader": "^0.5.7",,     "webpack": "^1.14.0",     "webpack-dev-middleware": "^1.8.4",     "webpack-hot-middleware": "^2.15.0",     "webpack-split-chunks": "^0.1.1",     "xmlbuilder": "^8.2.2"   } } 

As you can see it's pretty straightforward; just lots of packages. And here's my .eslintrc:

{   "extends": "airbnb",   "env": {     "browser": true,     "node": true   },   "globals": {     "NODE_ENV": true,     "isProduction": true,     "__ROUTE__": true   },   "parser": "babel-eslint",   "plugins": [     "babel"   ],   "rules": {     "react/jsx-filename-extension": [       "error",       {         "extensions": [           ".js",           ".jsx"         ]       }     ],     "comma-dangle": [       "error",       {         "arrays": "always-multiline",         "objects": "always-multiline",         "imports": "always-multiline",         "exports": "always-multiline",         "functions": "ignore"       }     ],     "eol-last": "error",     "import/order": "error",     "This next rule is just temporary until we start using PropTypes": 0,     "react/prop-types": 0   },   "settings": {     "import/resolver": {       "babel-module": {}     }   } } 

Answer 1

Add the following to your eslint, just to have the correct rule in there. And yes you can also turn it off, but the error is there for e reason.

"import/no-extraneous-dependencies": ["error", {"devDependencies": false, "optionalDependencies": false, "peerDependencies": false}] 

As far as I can tell, there is no issue with your package.json, so it has to be a syntax problem.

I don't have your code so I will show the examples:

var _ = require('lodash'); import _ from 'lodash'; 

If you have the above code (or something like it)

Then change it to:

import test from 'ava'; import find from 'lodash.find'; 

You can read more here:

https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-extraneous-dependencies.md

Answer 2

I had the same problem.

What solved it for me was to add a packageDir option explicitly:

"import/no-extraneous-dependencies": [     "error", {        "devDependencies": false,         "optionalDependencies": false,         "peerDependencies": false,         "packageDir": "./"     } ]