網站搜尋

create react app - 使用 eslint-typescript-import + eslint-import-resolver-typescript + CRA 時無法找到模組 node:fs

問題

我嘗試在我的 TS 專案中設置路徑別名，但無法運行。在執行 npm start 時，我遇到了兩個錯誤：

  • 找不到模組：錯誤：無法解析 ''~/App'' 在 ''D:\work\workbench\templates\template-fe-pure\src'' 中（即使 VSC 仍然能找到被導入檔案的位置；也就是沒有波浪線）
  • Resolve error: Cannot find module 'node:fs'

我如何進行路徑別名導入：
import App from "./App"; -> import App from "~/App";
在 tsconfig.json 中："baseUrl": ".","paths": {"~/*": ["./src/*"]},（完整檔案如下所示）

環境

  • CRA 使用 TS 模板
  • [email 
  • [email ：我添加這個是為了使用符合上述的路徑別名

檔案

.eslintrc.json
{
  "root": true,
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:import/recommended",
    "plugin:import/typescript",
    "plugin:eslint-comments/recommended",
    "plugin:prettier/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 6,
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "jest": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    },
    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"],
        "moduleDirectory": ["src", "node_modules"]
      },
      "typescript": {
        "alwaysTryTypes": true,
        "project": "./tsconfig.json"
      }
    }
  },
  "rules": {
    // eslint rules go here ...
  }
}


tsconfig.json
{
  "compilerOptions": {
    "target": "es6",
    "module": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"]
    },
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "exclude": ["**/node_modules", "**/.*/"]
}

堆疊追蹤

ERROR

[eslint] 
src\index.tsx
  Line 1:1:   Resolve error: Cannot find module 'node:fs'
Require stack:
- D:\work\workbench\templates\template-fe-pure\node_modules\eslint-import-resolver-typescript\lib\index.cjs
- D:\work\workbench\templates\template-fe-pure\node_modules\eslint-module-utils\resolve.js
- D:\work\workbench\templates\template-fe-pure\node_modules\eslint-plugin-import\lib\rules\no-unresolved.js
- D:\work\workbench\templates\template-fe-pure\node_modules\eslint-plugin-import\lib\index.js
- D:\work\workbench\templates\template-fe-pure\node_modules\@eslint\eslintrc\dist\eslintrc.cjs
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (D:\work\workbench\templates\template-fe-pure\node_modules\eslint-import-resolver-typescript\lib\index.cjs:5:10)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)  import/namespace
  Line 1:1:   Resolve error: Cannot find module 'node:fs'
Require stack:
- D:\work\workbench\templates\template-fe-pure\node_modules\eslint-import-resolver-typescript\lib\index.cjs
- D:\work\workbench\templates\template-fe-pure\node_modules\eslint-module-utils\resolve.js
- D:\work\workbench\templates\template-fe-pure\node_modules\eslint-plugin-import\lib\rules\no-unresolved.js
- D:\work\workbench\templates\template-fe-pure\node_modules\eslint-plugin-import\lib\index.js
- D:\work\workbench\templates\template-fe-pure\node_modules\@eslint\eslintrc\dist\eslintrc.cjs
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (D:\work\workbench\templates\template-fe-pure\node_modules\eslint-import-resolver-typescript\lib\index.cjs:5:10)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)  import/no-unresolved
  Line 1:1:   Resolve error: Cannot find module 'node:fs'
Require stack:
- D:\work\workbench\templates\template-fe-pure\node_modules\eslint-import-resolver-typescript\lib\index.cjs
- D:\work\workbench\templates\template-fe-pure\node_modules\eslint-module-utils\resolve.js
- D:\work\workbench\templates\template-fe-pure\node_modules\eslint-plugin-import\lib\rules\no-unresolved.js
- D:\work\workbench\templates\template-fe-pure\node_modules\eslint-plugin-import\lib\index.js
- D:\work\workbench\templates\template-fe-pure\node_modules\@eslint\eslintrc\dist\eslintrc.cjs
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (D:\work\workbench\templates\template-fe-pure\node_modules\eslint-import-resolver-typescript\lib\index.cjs:5:10)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)  import/default
  Line 4:17:  Unable to resolve path to module '~/App'   import/no-unresolved

Search for the keywords to learn more about each error.

答案＃1

TypeScript 對新的 node: 協議的支援已經被加入到 @types/[email ，所以你可以嘗試安裝它。否則，你可以嘗試降級到 [email ，該版本不使用新的 node: 協議語法。

除此之外，你的配置看起來沒問題。