[英]eslint / typescript: Unable to resolve path to module
我的.eslintrc.json
是:
{
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true,
"jest": true
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"react",
"prettier",
"import"
],
"extends": [
"airbnb",
"airbnb/hooks",
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:import/typescript",
"prettier"
],
"root": true,
"rules": {
"no-const-assign": 1,
"no-extra-semi": 0,
"semi": 0,
"no-fallthrough": 0,
"no-empty": 0,
"no-mixed-spaces-and-tabs": 0,
"no-redeclare": 0,
"no-this-before-super": 1,
"no-unreachable": 1,
"no-use-before-define": 0,
"constructor-super": 1,
"curly": 0,
"eqeqeq": 0,
"func-names": 0,
"valid-typeof": 1,
"import/extensions": 0,
"react/jsx-filename-extension": 0,
// note you must disable the base rule as it can report incorrect errors
"no-shadow": 0,
"@typescript-eslint/no-shadow": [
1
],
"no-unused-vars": 0,
"@typescript-eslint/no-unused-vars": 1,
"no-undef": 0,
"jsx-a11y/click-events-have-key-events": 0,
"jsx-a11y/no-static-element-interactions": 0,
"@typescript-eslint/explicit-module-boundary-types": 0,
"react/button-has-type": 0,
"react/require-default-props": 0,
"react/prop-types": 0,
"react-hooks/exhaustive-deps": 0,
"react/jsx-props-no-spreading": 0
},
"settings": {
"import/resolver": {
"node": {
"extensions": [
".js",
".jsx",
".ts",
".tsx"
]
}
}
}
}
在文件src/components/elements/ProtectedRoutes/InviteRoute.tsx
中,我有:
import routeNames from 'constants/routeNames';
import useRoles from 'hooks/roles';
import { ROLE } from 'shared/src/types/enums';
該應用程序運行良好,但是當我運行 lint 時,出現錯誤:
2:24 error Unable to resolve path to module 'constants/routeNames' import/no-unresolved
3:22 error Unable to resolve path to module 'hooks/roles' import/no-unresolved
5:22 error Unable to resolve path to module 'shared/src/types/enums' import/no-unresolved
我究竟做錯了什么?
看起來您已經在 TypeScript 配置中定義了自定義路徑(通常是tsconfig.json
)。 import
插件不知道 TypeScript 配置的正確位置,因此無法解析這些路徑。 您需要做的是通過解析器選項中的project
參數指定 TypeScript 配置的正確路徑:
{
...
"settings": {
"import/resolver": {
"project": "./my-path-to/tsconfig.json",
...
}
}
}
或者,如果您的tsconfig.json
位於存儲庫的根目錄中,請設置: "project": {}
,請參閱此 GitHub 問題: https : //github.com/import-js/eslint-plugin-import/issues/1485
如果要導入不帶擴展名的 ts / tsx 文件,則應將此配置傳遞給 eslint。 模塊目錄對於解析 ./src 中的路徑很重要。 如果在 src 中找不到模塊,它將在 node_modules 中搜索
"settings": {
"import/resolver": {
"node": {
"extensions": [".ts", ".tsx"],
"moduleDirectory": ["src", "node_modules"]
}
}
}
如果您在 VSCode 的 monorepo 中收到此錯誤,可能是因為 ESLint 在不正確的文件夾中查找 tsconfig 文件,您應該添加帶有一些配置的 .vscode\/settings.json。
例如,如果您有一個位於工作區\/服務器的項目:
{
"eslint.workingDirectories": [
{ "directory": "workspaces/server", "changeProcessCWD": true },
]
}
如果這有幫助,我遇到了類似的問題,但是在沒有打字稿的 create-react-app 項目中。 我必須做的是將當前目錄添加到 moduleDirectory 字段,見下文。
在我的.eslintrc.json
我添加了以下內容,請注意我沒有在我的項目中使用打字稿文件:
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx"],
"moduleDirectory": [".", "node_modules"]
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.