为啥（以及如何修复）ESLint import/no-extraneous-dependencies 在已安装包上失败？

Posted 2023-03-07

【中文标题】为啥（以及如何修复）ESLint import/no-extraneous-dependencies 在已安装包上失败？

【英文标题】：Why (and How Can I FIx) ESLint import/no-extraneous-dependencies Failures on Installed Packages?为什么（以及如何修复）ESLint import/no-extraneous-dependencies 在已安装包上失败？

【发布时间】：2017-10-14 20:14:37

【问题描述】：

运行 ESLint 时出现以下错误：

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

但是，我已经安装了这两个模块，并且在我的 package.json 中：

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

并运行：

npm i -S joi

没有帮助或解决问题。我的package.json 中还有很多其他包，只有这两个有问题。 可能这是一个错误，但 ESLint 有很多人关注它，我认为我做错事的可能性更大......只是我不知道是什么（那些包看起来和我的package.json 中的任何其他人一样）。

任何人都可以建议我可能会做什么（无意中）让 ESLint 抱怨这两个包，而且只有这两个包，尽管它们已安装？

编辑

这是我的 package.json（删除了一些不相关的识别位）：

  "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"
  

如您所见，它非常简单；只是很多包。这是我的.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": 
    
  

【问题讨论】：

你在使用 Docker 吗？

不，这只是一个普通的旧 Mac 环境。感谢您抽出宝贵时间询问。

你能把你的 package.json 和你的 .eslintrc 放在一起吗？

我已经编辑了我的问题以包含两者。

您是否尝试将 lodash 和 joi 添加到您的 DevDependencies？

【参考方案1】：

将以下内容添加到您的 eslint 中，以便在其中包含正确的规则。是的，您也可以将其关闭，但错误是有原因的。

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

据我所知，你的 package.json 没有问题，所以一定是语法问题。

我没有你的代码，所以我将展示示例：

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

如果你有上面的代码（或类似的）

然后改成：

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

您可以在这里阅读更多内容：

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

【讨论】：

感谢您的建议，但即使我添加了禁用代码（我尝试将其添加为rules 和settings）它也没有帮助。但显然我不想禁用该规则：我只想让它正常工作。至于重做我的导入，那并不是真正可行的（我们有 很多 Lodash 导入，还有相当数量的 Joi 导入）。另外，我们拥有的每个 Joi 导入都是相同的，它们都采用您推荐的格式：const Joi = require('joi');。

我不建议 require，我建议消除它们。因为 require 被视为外部依赖项。所以我建议在进口中改变它。此外，如果您经常使用其他 3rd 方库，我建议您制作一个桶文件来归还所有这些库。因此，您可以更轻松地更改库，而无需更改所有代码。

这是一个组合的前端和后端代码库（Lodash 被两者使用，而 Joi 只是后端）。虽然我们在前端使用 Webpack 获取 import 语法，但我们不在后端，因此我们只能在此处使用 require 语法。无论如何，我觉得任何解决 linter 误报的解决方案都不应该要求（没有双关语）更改我的代码库中一半的 import 语句。

嗯，这是为了更智能地实现它而做出的改变。如果您一直需要或导入相同的东西，请创建一个桶，这样您就不必更改每个文件。这不是误报，它确实做了它应该做的事情。我不太明白前端的评论？但是如果你只想使用 require，你应该关闭 extraneous-dependency 规则。

re：“我不太明白前端的评论？”我们有一个网络应用程序。一半（-ish）的代码在后端运行，即。它为便于数据库访问的 API 提供服务。这段代码没有使用 Webpack，但确实使用了 lodash 和 joi。代码的另一半（-ish）为前端提供动力：它在用户的浏览器中运行，并通过 Webpack 提供服务。该代码使用lodash，但不使用joi。至于制作桶文件，这正是lodash 本身的内容（Lodash 是一个模块中的独立函数库）：我不确定制作桶文件的桶文件会得到什么。跨度>

【参考方案2】：

我遇到了同样的问题。

为我解决的问题是显式添加 packageDir 选项：

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

【讨论】：

我不得不使用"packageDir": __dirname 来让它在 VS Code 中工作。来源：github.com/benmosher/eslint-plugin-import/blob/master/docs/…

感谢@SillyFreak，这实际上解决了我的问题。愿意回答吗？这里可能有更多的 vscode 人......

packageDir: __dirname 解决方案有效，但我必须将文件类型从.eslintrc 更改为.eslintrc.js 才能获得__dirname。

【参考方案3】：

devDependencies: packageDir 或 devDependencies: false 上面的解决方案对我不起作用，但最终我解决了这个问题。这对我有用：

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

只需在devDependencies 中列出您的测试文件夹，而不是false。

【参考方案4】：

我只是通过将 devDependencies 设置为 true 来解决它。默认为假。

"import/no-extraneous-dependencies": [
        "error", 
           "devDependencies": true
        
    ]

【讨论】：

文档说它默认为true，也许它最近改变了。 github.com/benmosher/eslint-plugin-import/blob/master/docs/…

不错@DaryaWiśniewski

【参考方案5】：

我通过删除node_modules 文件夹和package-lock.json 然后重新创建npm install 解决了这个问题

【参考方案6】：

我遇到了这个问题，因为某些工具（很可能是“汇总”）在我的项目子目录中生成了另一个 package.json（包含空 JSON ）。删除该文件有帮助。