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?

user_17765797 · Answer

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

user_5470544 · Answer

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

user_1404422 · Answer

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.

For example if you have a project located at workspaces/server:

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

to tell eslint about all the different sub-project folders

eslint / typescript: Unable to resolve path to module

3 Answers