如何修复import / no-unresolved eslint来查看package.json“module”而不是“main”

Question

我正在导入一个纱线工作区包，其中包含在ES6中定义的module字段，并使用插件eslint-plugin-import进行linting

我的create-react-app设置通过webpack自动使用module，但是eslint抱怨@mycompany/utils包是未定义的。

Unable to resolve path to module '@mycompany/utils'. [import/no-unresolved]

所以我的问题是如何让我的linter看看module路径而不是main

这是我的package.json for utils包

{
  "name": "@mycompany/utils",
  "version": "0.0.2",
  "main": "dist/index.js",
  "module": "src/index.js"
}

Answer 1

• 将eslint-import-resolver-webpack安装为dev-dependency https://github.com/benmosher/eslint-plugin-import/tree/master/resolvers/webpack
• 更新.eslintrc中的设置

{
  "parser": "babel-eslint",
  "extends": [
    "eslint:recommended",
    "plugin:import/recommended",
    "plugin:react/recommended"
  ],
  "plugins": ["react"],

  "settings": {
    "import/resolver": {
      "webpack": {
        "config": {
          "resolve": {
            "modules": ["node_modules"]
          }
        }
      }
    }
  }
}

它的作用是更新你的eslint-plugin-import以使用webpack而不是node来解决。在webpack解析器中，它会自动首先在module上查看你的main。

https://github.com/benmosher/eslint-plugin-import/blob/master/resolvers/webpack/index.js#L200