19

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?

Shamoon
  • 41,293
  • 91
  • 306
  • 570
  • 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 Sep 15 '21 at 21:39
  • For me this was the working solution https://stackoverflow.com/a/71874257/1770571 – Salma Gomaa Apr 14 '22 at 17:29

5 Answers5

16

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"]
    }
  }
}
Max G.
  • 733
  • 3
  • 10
7

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

Kenneth Lynne
  • 15,461
  • 12
  • 63
  • 79
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

JSON Derulo
  • 9,780
  • 7
  • 39
  • 56
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"]
    }
  }
}
haydar
  • 15
  • 2
1

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.

Vencovsky
  • 28,550
  • 17
  • 109
  • 176