eslint / typescript: Unable to resolve path to module

Question

My .eslintrc.json is:

{
    "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"
                ]
            }
        }
    }
}

In a file src/components/elements/ProtectedRoutes/InviteRoute.tsx , I have:

import routeNames from 'constants/routeNames';
import useRoles from 'hooks/roles';
import { ROLE } from 'shared/src/types/enums';

The app runs fine, but when I run lint, I get errors:

  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

What am I doing wrong?

Answer 1

It looks like you have defined custom paths in your TypeScript config (usually tsconfig.json ). The import plugin doesn't know about the correct location of the TypeScript config and hence cannot resolve those paths. What you need to do, is to specify the correct path to your TypeScript config via the project parameter in the resolver options :

{
    ...
    "settings": {
        "import/resolver": {
            "project": "./my-path-to/tsconfig.json",
            ...
        }
    }
}

Or if your tsconfig.json is located in your respository's root, set: "project": {} , see this GitHub issue: https://github.com/import-js/eslint-plugin-import/issues/1485

Answer 2

You should pass this config to eslint if you want to import your ts / tsx files without the extension. The module directory is important here to resolve path inside ./src. If the module is not found inside src it will search inside node_modules

"settings": {
  "import/resolver": {
    "node": {
      "extensions": [".ts", ".tsx"],
      "moduleDirectory": ["src", "node_modules"]
    }
  }
}

Answer 3

If you get this error in a monorepo in VSCode it is probably because ESLint is looking for the tsconfig file in the incorrect folder and you should add a .vscode\/settings.json with some configuration.

{
  "eslint.workingDirectories": [
    { "directory": "workspaces/server", "changeProcessCWD": true },
  ]
}

Answer 4

In case this helps, I had similar issue but in a create-react-app project without typescript. What I had to do was add current directory to the moduleDirectory field, see below.

In my .eslintrc.json I added the following, please note I'm not using typescript files in my project:

"settings": {
"import/resolver": {
    "node": {
      "extensions": [".js", ".jsx"],
      "moduleDirectory": [".", "node_modules"]
    }
  }
}