'Why (and How Can I FIx) ESLint import/no-extraneous-dependencies Failures on Installed Packages?
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": {}
}
}
}
Solution 1:[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:
Solution 2:[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": "./"
}
]
Solution 3:[3]
I solved it simply by setting devDependencies to true. By default it is false.
"import/no-extraneous-dependencies": [
"error", {
"devDependencies": true
}
]
Solution 4:[4]
devDependencies: packageDir or devDependencies: false solutions above didn't work for me, but eventually I solved this. Here's what worked for me:
"import/no-extraneous-dependencies": [
"error",
{
"devDependencies": ["test/**"],
"optionalDependencies": false,
"peerDependencies": false
}
],
Just list your tests folder in devDependencies instead of false.
Solution 5:[5]
I solved this by simply deleting the node_modules folder and the package-lock.json then doing a fresh npm install
Solution 6:[6]
What I did to fix this:
"import/no-extraneous-dependencies": [
"error",
{
"devDependencies": [
"**/*.stories.*",
"**/.storybook/**/*.*",
"**/*.test.*"
],
"peerDependencies": true
}
]
Solution 7:[7]
If you arrived here while searching for 'Definition for rule 'import/no-extraneous-dependencies' was not found'
Then to fix this issue you should add "plugins": ["import"] in your .eslintrc file
Solution 8:[8]
I had this problem, because some tool (most probably "rollup") generated another package.json (containing empty JSON {}) in my project's subdirectory. Deleting that file helped.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | therebelcoder |
| Solution 2 | user92301 |
| Solution 3 | |
| Solution 4 | revelt |
| Solution 5 | authentichigh |
| Solution 6 | Marcus Fonseca |
| Solution 7 | Foolish |
| Solution 8 | Andrey.S |