与 TS 反应，eslint 错误导入/未解决

Question

• I have next ESLINT issue:

  Unable to resolve path to module 'lib-name' import/no-unresolved

• App tech is React with Typescript

• On running eslint got a bounch above error

• Tried a lot of different solution and still has the same problem

this is .eslintrc.js file

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'],
          },
        },
      },
    },
  ],
};

-- I have also next file in repo 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": {}
    }
  ]
}

Any help is welcome:! :)

Answer 1

I fixed this one on my Nx project by adding this to the .eslintrc.json at the root of the project:

"settings": {
  "import/parsers": {
    "@typescript-eslint/parser": [".ts", ".tsx"]
  },
  "import/resolver": {
    "typescript": {
      "project": ["tsconfig.base.json"]
    },
    "node": {
      "project": ["tsconfig.base.json"]
    }
  }
}