React+TypeScript项目ESLint import/no-unresolved错误求助

在React+TypeScript项目中运行ESLint时，频繁出现「Unable to resolve path to module 'lib-name' import/no-unresolved」错误，试过多种方法都没解决，附上项目中的.eslintrc.js和.eslintrc.json配置文件，求帮忙排查。

.eslintrc.js 配置内容 #

const sharedRules = {
  // import
  'import/prefer-default-export': 'off',
  'import/no-extraneous-dependencies': 'off', // This is useful for lodash imports like "import get from lodash/get"
  'import/extensions': [
    'error',
    'ignorePackages',
    {
      js: 'never',
      jsx: 'never',
      ts: 'never',
      tsx: 'never',
    },
  ],
  // js
  'curly': 2,
  'no-use-before-define': 'off', // must disable base rule to use proper typescript-eslint rule
  'camelcase': 'off', // This is unavoidable in data coming from the BE
  'max-classes-per-file': 'off',
  'no-octal': 'off',
  'no-shadow': 'off',
  'no-underscore-dangle': 'off',
  // react
  'react-hooks/exhaustive-deps': 'warn',
  'react/jsx-filename-extension': 'off',
  'react/jsx-one-expression-per-line': 'off',
  'react/jsx-props-no-spreading': 'off',
  'react/prop-types': 'off',
  'react/no-unused-prop-types': 'off',
  'react/require-default-props': 'off',
  'react/react-in-jsx-scope': 'off', // https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
  // a11y
  'jsx-a11y/anchor-is-valid': 'off',
  'jsx-a11y/label-has-associated-control': 'off', // Just a hassle, you can nest inputs inside labels and it works fine. Check checkbox component for example.
  'jsx-a11y/control-has-associated-label': 'off',
  'jsx-a11y/no-noninteractive-tabindex': 'off',
  'jsx-a11y/click-events-have-key-events': 'off',
  'jsx-a11y/no-static-element-interactions': 'off',
  'import/no-unresolved': [2, { caseSensitive: false }],
};

const typeScriptRules = {
  '@typescript-eslint/no-explicit-any': 'warn',
  '@typescript-eslint/ban-ts-comment': 'warn',
  '@typescript-eslint/explicit-function-return-type': 'off',
  '@typescript-eslint/no-use-before-define': ['error'],
  '@typescript-eslint/no-non-null-assertion': 'off',
  ...sharedRules,
};

module.exports = {
  env: {
    browser: true,
    es6: true,
    jest: true,
  },
  extends: ['airbnb', 'airbnb/hooks', 'prettier'],
  globals: {
    createMockHttpRequest: true,
    createStore: true,
    mockAjaxRequest: true,
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 11,
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint', 'eslint-plugin-prettier'],
  rules: { ...sharedRules },
  overrides: [
    {
      extends: [
        'airbnb',
        'airbnb/hooks',
        'plugin:@typescript-eslint/eslint-recommended',
        'plugin:@typescript-eslint/recommended',
        'prettier',
        'prettier/@typescript-eslint',
        'prettier/react',
      ],
      files: ['**/*.ts', '**/*.tsx'],
      rules: { ...typeScriptRules },
      settings: {
        'import/resolver': {
          node: {
            extensions: ['.js', '.jsx', '.ts', '.tsx'],
          },
        },
      },
    },
  ],
};

.eslintrc.json 配置内容 #

{
  "root": true,
  "plugins": ["@nrwl/nx", "react", "react-hooks"],
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
      "rules": {
        "@nrwl/nx/enforce-module-boundaries": [
          "error",
          {
            "enforceBuildableLibDependency": true,
            "allow": [],
            "depConstraints": [
              {
                "sourceTag": "*",
                "onlyDependOnLibsWithTags": ["*"]
              }
            ]
          }
        ]
      },
    },
    {
      "files": ["*.ts", "*.tsx"],
      "extends": ["plugin:@nrwl/nx/typescript"],
      "rules": {}
    },
    {
      "files": ["*.js", "*.jsx"],
      "extends": ["plugin:@nrwl/nx/javascript"],
      "rules": {}
    }
  ]
}

解决方案 #

1. 安装TypeScript解析依赖
   执行命令安装eslint-import-resolver-typescript，让ESLint能正确识别TypeScript的路径映射：

   npm install eslint-import-resolver-typescript --save-dev
   # 或用yarn
   yarn add eslint-import-resolver-typescript --dev
   

2. 更新ESLint的resolver配置
   在.eslintrc.js的TypeScript文件覆盖配置中，修改import/resolver同时支持node和typescript：

   settings: {
     'import/resolver': {
       typescript: {},
       node: {
         extensions: ['.js', '.jsx', '.ts', '.tsx']
       }
     }
   }
   

   确保tsconfig.json里的baseUrl和paths配置正确（如果有自定义路径），ESLint会读取这个文件解析模块。

3. 合并重复配置文件
   当前存在.eslintrc.js和.eslintrc.json两个配置，可能导致规则冲突。建议把.eslintrc.json中的@nrwl/nx相关规则合并到.eslintrc.js：

   • 在plugins数组中加入'@nrwl/nx'
   • 在rules中添加'@nrwl/nx/enforce-module-boundaries'规则
     之后删除.eslintrc.json，避免配置冲突。

4. 调试规则配置
   暂时将sharedRules中的'import/no-unresolved'改为warn或off，验证是否是规则本身的配置问题，确认后再改回调试。

5. 清除ESLint缓存
   缓存可能导致解析异常，执行命令清除：

   npx eslint --cache-clear
   

内容的提问来源于stack exchange，提问作者Mark James