CODEWITHSUNDEEP
javascripttypescripteslintlint
Shamoon
Shamoon

Reputation: 43491

eslint / typescript: Unable to resolve path to module

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?

Upvotes: 20

Views: 38358

Answers (5)

Vencovsky
Vencovsky

Reputation: 31565

If you are using typescript, don't forget to include .d.ts to extensions.

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

I had a dependency that only exported .d.ts and the accepted answer was not working.

Adding .d.ts solved.

Upvotes: 2

haydar
haydar

Reputation: 15

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

Upvotes: 1

Kenneth Lynne
Kenneth Lynne

Reputation: 15579

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

Upvotes: 10

Max G.
Max G.

Reputation: 850

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

Upvotes: 17

JSON Derulo
JSON Derulo

Reputation: 17522

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

Upvotes: 3

Related Questions