指向文件而不是目录时，Eslint 无法解析模块的路径答案

【问题标题】：Eslint's Unable to resolve path to module when pointing to file and not a directory指向文件而不是目录时，Eslint 无法解析模块的路径
【发布时间】：2021-07-02 20:37:47
【问题描述】：

我有一个带有 Typescript 的 React JS 项目，我使用 Eslint 进行 linting。我已经为tsconfig.json 和webpack.config.json 添加了路径别名，看起来像这样

// webpack.config.json
components: path.resolve(__dirname, './../src/components/')
...

和

// tsconfig.json
"components/*": ["components/*"],
...

所以，如果我有一个像src/components/Button/index.tsx 这样的文件导入为components/Button，Eslint 是安静的。

当我将src/components/Loader.tsx 之类的文件导入为components/Loader 时，问题就来了。在这里，linter 抱怨 Unable to resolve path to module 'components/Loader'

请注意：

项目编译成功。
我不想在我的eslintrc.json 上使用"import/no-unresolved": 0 来抑制这个警告

我该如何解决这个问题？

【问题讨论】：

标签： reactjs webpack eslint

【解决方案1】：

使用 components/Loader 与 components/Loader/index.tsx 相同，但在您的情况下，没有包含 index.tsx 文件的此类 Loader 文件夹要删除警告，请使用 loader 和 index.tsx 文件创建文件夹结构，或者明确定义您正在通过 components/Loader.tsx 访问文件

【讨论】：