Question

In my webpack config. I defined aliases

alias: {
            components: 'src/components/',
            config: 'src/config/'
}

When I import a module from this path an eslint error occurred.

import ShadowWrapper from 'components/ShadowWrapper'

error 'components' should be listed in the project's dependencies. Run 'npm i -S components' to add it import/no-extraneous-dependencies

Answer 1

这对我有用：

我已安装 eslint-import-resolver-alias 作为开发依赖项：

npm install eslint-plugin-import eslint-import-resolver-alias --save-dev
在 Webpack配置（在我的情况下是Vue配置，由Vue-cli与Webpack配置合并），我添加了一些别名：
```
stringVector
```

在 .eslintsrc （或.eslintsrc.js，如果使用的话）中，我添加了插件和这些别名的映射，如下所示：

 resolve: {
     extensions: ['.js', '.vue', '.json', '.less'],
     alias: {
         Site: path.resolve(__dirname, 'src/site'),
         Admin: path.resolve(__dirname, 'src/admin'),
         Common: path.resolve(__dirname, 'src/common'),
         Assets: path.resolve(__dirname, 'src/common/assets'),
         Configs: path.resolve(__dirname, 'src/common/configs'),
         Style: path.resolve(__dirname, 'src/common/style')
     }
 }

为了清楚起见，我添加了扩展名和一些不错的措施，您可以选择不自己使用。

可选：

如果您使用 VS Code ，并希望这些别名与路径Intellisense一起使用，请在根目录中添加文件 jsconfig.json ，并指定别名路径：

"extends": ["plugin:import/recommended"],
"settings": {
     "import/resolver": {
         "alias": {
             "map": [
                 ["Site", "./src/site"],
                 ["Admin", "./src/admin"],
                 ["Common", "./src/common"],
                 ["Assets", "./src/common/assets"],
                 ["Configs", "./src/common/configs"],
                 ["Style", "./src/common/style"]
             ]
         },
         "extensions": [".js", ".less", ".json", ".vue"]
     }
}

React和Typescript还有其他设置。在官方网站上查看documentation。

Answer 2

This issue can be resolved by using the eslint-import-resolver-webpack

Answer 3

感谢Pranav解决此问题的方法！
我在这篇文章中添加了一些代码，以使其对其他人更实用。
首先，在webpack配置文件中，我定义了以下别名：

alias:{
  components: path.resolve(__dirname, "src", "components")
}

这允许我以这种方式在应用程序中导入组件：

import NewsFeed from 'components/NewsFeed'

我已经安装了eslint-import-resolver-webpack插件，并将以下代码放入.eslintrc.js文件（我为eslint配置文件选择了javascript格式）：

settings: {
    'import/resolver': {
      alias: {
        map: [
          ['components', './src/components']
        ]
      }
    }

就是这样，在运行linter之后，我摆脱了Unable to resolve path to module 'components/NewsFeed'错误消息
希望对您中的某些人有所帮助！

Answer 4

另一种方式，无需在 webpack.config.js 和 .eslintrc 之间映射别名。

您可以使用 eslint-import-resolver-webpack 并像这样设置您的 .eslintrc 文件：

{
  "extends": [
    "@hrplatform"
  ],
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"],
        "moduleDirectory": [
          "node_modules",
          "src"
        ]
      }
    }
  }
}

eslint error showing with webpack alias

4 个答案: