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

Question

我目前正在导入一个纱线工作区包，该包具有module在 ES6 中定义的字段并使用插件进行 lintingeslint-plugin-import

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

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

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

这是我用于 utils 包的 package.json

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

Answer 1

• 安装eslint-import-resolver-webpack作为开发依赖 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