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?

Did you mean import routeNames from './constants/routeNames'; instead of import routeNames from 'constants/routeNames';? I'm asking in comments because I don't know where your constants/routeNames module is supposed to come from here — Dominik
– Dominik, Commented Sep 15, 2021 at 21:39
For me this was the working solution stackoverflow.com/a/71874257/1770571 — Salma Gomaa
– Salma Gomaa, Commented Apr 14, 2022 at 17:29

Max G. · Accepted Answer · 2022-01-17 12:41:53Z

17

+50

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

answered Jan 17, 2022 at 12:41

Max G.

8701 gold badge6 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yannick Schröder Over a year ago

Oops! Something went wrong! :( ESLint: 8.10.0 TypeError: "settings" for node must be an array

Angel Over a year ago

This fails with new Material UI syntax @mui

Kenneth Lynne · Accepted Answer · 2022-02-02 23:32:40Z

10

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

answered Feb 2, 2022 at 23:32

Kenneth Lynne

15.6k12 gold badges66 silver badges80 bronze badges

4 Comments

Manuel Bichler Over a year ago

Worked as a charm after 2 days of trying! thanks :D

Valentino Pereira Over a year ago

Bravo! After all it was a vscode issue. I spent hours debugging my eslintrc but found no luck. Thanks buddy!

Jamie Smith Over a year ago

This fix worked for me, thanks! Just a note that I needed a starting backslash (e.g. /workspaces/server.

Douglas Gaskell Over a year ago

Holy crap, after hours of banging my head into the wall this was it.

JSON Derulo · Accepted Answer · 2022-01-11 17:06:52Z

3

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

edited Jan 11, 2022 at 17:06

answered Jan 11, 2022 at 16:33

JSON Derulo

18.8k11 gold badges62 silver badges85 bronze badges

Comments

Vencovsky · Accepted Answer · 2023-05-18 16:24:36Z

2

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.

answered May 18, 2023 at 16:24

Vencovsky

32.1k25 gold badges132 silver badges202 bronze badges

Comments

haydar · Accepted Answer · 2022-12-19 03:38:40Z

1

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

answered Dec 19, 2022 at 3:38

haydar

152 bronze badges

Collectives™ on Stack Overflow

eslint / typescript: Unable to resolve path to module

5 Answers 5

2 Comments

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related