Using eslint with typescript - Unable to resolve path to module

Question

I have this import in my file app.spec.ts:

import app from './app';

Which causes this Typescript error

2:17  error  Unable to resolve path to module './app'  import/no-unresolved

./app.ts does exist, but I have not compiled the .ts file into a .js file. As soon as I compile the .ts file to a .js, the error goes away.

However, since eslint is supposed to work with typescript, it should resolve modules with the .ts and not the .js.

I've also added the typescript information in my eslint config file:

"parser": "@typescript-eslint/parser",
"parserOptions": {
    "project": "./tsconfig.json"
}

How can I config eslint in such a way that it tries to resolve modules with the .ts and not the .js?

EDIT #1

Content of app.ts:

import bodyParser from 'body-parser';
import express from 'express';
import graphqlHTTP from 'express-graphql';
import { buildSchema } from 'graphql';

const app = express();

const schema = buildSchema(`
    type Query {
        hello: String
    }
`);
const root = { hello: () => 'Hello world!' };

app.use(bodyParser());
app.use('/graphql', graphqlHTTP({
    schema,
    rootValue: root,
    graphiql: true,
}));

export default app;

Have you added `"plugins": ["@typescript-eslint"]`? Docs https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin — Jasmonate, Mar 16 '19 at 15:53
Hey @Jasmonate, thanks for the answer! So I just added this config, and while I can now do some Typescript-specific linting, it does not solve my problem. I still get `Unable to resolve path to module './app'` — Maxime Dupré, Mar 17 '19 at 20:44
Have you tried adding this into your .eslintrc? ```settings: { 'import/resolver': 'webpack' }``` (I'm assuming the code builds OK. If not, you will need to tell webpack to resolve .ts/.tsx files as well, which means adding something like: ``` module.exports = { resolve: { extensions: ['.js', '.ts'] } }; ``` or whatever file extensions you want to be able to import! ) — Abulafia, Mar 21 '19 at 12:02
The above comment is incomplete, I'm afraid! I ran out of editing time having pressed enter too soon! The ```module.exports = { resolve: { extensions: ['.js', '.ts'] } }; ``` bit should be in your webpack config! — Abulafia, Mar 21 '19 at 12:09
@Eastrall I edited the question with the content of `app.ts` :) — Maxime Dupré, Mar 21 '19 at 12:29
If all else fails, you can try deleting `node_modules`, reinstalling, and restarting TS server — KyleMit, Apr 29 '21 at 00:12

score 601 · Accepted Answer · edited Dec 15 '19 at 07:50

601

You can set the ESLint module import resolution by adding this snippet to your .eslintrc.json configuration file:

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

More informations about resolvers: https://github.com/benmosher/eslint-plugin-import#resolvers.

edited Dec 15 '19 at 07:50

radbyx

9,352
21
84
127

answered Mar 21 '19 at 12:51

Eastrall

7,609
1
16
30

40

I believe the [other answer](https://stackoverflow.com/a/56696478/1179377) is the right solution for this. – Izhaki Sep 13 '19 at 22:58
2

This seemed to solve the `Unable to resolve path to module` error, but now I'm still getting a bunch of `Missing file extension "tsx" for [...]` – Ryan Dec 29 '20 at 23:31
4

Ahh, `'import/extensions': 0,` helped: https://stackoverflow.com/questions/56064609/unable-to-resolve-relative-module-paths-when-eslint-run-from-sub-folder/56192351#comment115802229_56192351 – Ryan Dec 29 '20 at 23:46
1

It's one of those days! I had this problem, used this solution, and it didn't work. Tried it again several hours later and then it works. Weird! – c0dezer019 Jul 26 '21 at 17:03
4

In my `eslintrc.js` config file, the `"import/resolver"` object needed to sit within the `"rules"` node, not the `"settings"` node as described above. – stwr667 Jul 21 '22 at 05:31
I needed to install: npm install eslint-import-resolver-alias --save-dev – Csutkas Mar 29 '23 at 13:30

Rafael Rozon · Answer 2 · 2022-12-29T12:47:53.540

219

I had the same problem and I was only able to fix it by adding the typescript plugin to .eslintrc, using the extends option in .eslintrc

  extends: [
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
  ],

edited Dec 29 '22 at 12:47

answered Jun 21 '19 at 03:28

Rafael Rozon

2,639
1
15
27

57

Thanks! Adding `"plugin:import/typescript"` is what fixed it for me. – charlax Jul 29 '20 at 14:19
12

Note that you need to 1. place "plugin:import/typescript" after "airbnb-base". 2. Remember to add `"import"` in `plugins` section. – MasterWil Jan 13 '21 at 17:17
4

now i get `Missing file extension "ts" for ` – Volodymyr Bobyr Jun 02 '21 at 21:16
5

^ fixed with: https://stackoverflow.com/a/59268871/12658818 – Volodymyr Bobyr Jun 08 '21 at 15:43
1

For some reason by just having "plugin:import/typescript", did not solved this problem for me. The solution was to use this: https://github.com/alexgorbatchev/eslint-import-resolver-typescript – Kristóf Dombi Nov 05 '21 at 14:22
If anyone tries this and gets the error `Failed to load config plugin:import/typescript`, make sure you're not on an ancient version of `eslint-plugin-import` like I was. The typescript config was added somewhere between 2.14.0 and 2.25.2. – Nathaniel C Jul 29 '22 at 22:30
I think this is the best answer! – Turnip Jul 03 '23 at 22:58

score 129 · Answer 3 · answered Aug 17 '20 at 12:41

129

This was the only solution that worked for me.

First, you need to install this package:

yarn add -D eslint-import-resolver-typescript

Then add this to your .eslintrc file so it can load the alias settings from your tsconfig.json into ESLint:

{
  "settings": {
    "import/resolver": {
      "typescript": {}
    },
  },
}

answered Aug 17 '20 at 12:41

Diogo Capela

5,669
5
24
35

9

This is the only one that worked for me when using a monorepo and a path alias to a different package. – semkeijsper Apr 14 '21 at 11:15
1

@Semx11, Same here! – Jalal Apr 24 '21 at 05:27
1

it's only solution for me thx ;) – June Nov 09 '21 at 02:15
3

` "typescript": {} ` did the trick for me. – FR073N Nov 18 '21 at 12:44
2

Thanks for this solution, the other ones didn't really help in my use case – julianYaman Feb 09 '22 at 16:40
1

this worked for me, one thing to note is if you are using an IDE and the error is shown by the IDE, make sure that you check it with the command line, cause your IDE may be misconfigured. – shamaseen Mar 31 '22 at 18:47
1

Thanks! Missing `eslint-import-resolver-typescript` was the issue! – Oleksandr Danylchenko May 01 '22 at 12:22
1

this solved the path alias issue in a react-native cli project – Nivethan May 15 '22 at 19:27
1

this is what did the trick for me. I was missing this step. Thanks – Juanma Jun 22 '22 at 13:03
This was the only thing that worked for me. Thanks! – Wladston Ferreira Filho Apr 14 '23 at 16:42

score 112 · Answer 4 · answered Oct 10 '19 at 13:04

112

This does it for me:

.eslintrc.js

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

answered Oct 10 '19 at 13:04

olefrank

6,452
14
65
90

10

This is what worked for me; even including the "plugin:import/*" extensions didn't do anything. The `moduleDirectory` line pointing to `'src/'` was the key to get this working on my end. – Epoch Feb 19 '20 at 15:58
2

This worked for me as well. Note that HAD to add the "moduleDirectory" key. – Tevon Strand-Brown Mar 19 '20 at 01:47
Adding the moduleDirectory: ['node_modules', 'myModules/'] indeed helped. I've seen a partial version of this solution without 'moduleDirectory' property and it didn't work. This one did the trick. – Yan Yankowski May 06 '20 at 09:40
5

works after adding moduleDirectory: ['node_modules', 'src/'] – underscore May 17 '20 at 15:04
1

This worked for me using the same config in .eslintrc.json in the typescript react project. – Sandeep vashisth Oct 21 '21 at 11:49
This worked for me with [Quasar v1](https://v1.quasar.dev/) (`quasar create --branch v1`) and `airbnb-base` [ESLint config](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb-base). – Paul P Feb 15 '22 at 19:06
this works with nextjs, thanks – Kristi Jorgji Mar 16 '22 at 14:00
Add my voice to also say this is the only solution that also worked for me after trying pretty much everything else that I came across to solve this problem – Hazy Jun 08 '22 at 22:54

score 34 · Answer 5 · answered Mar 07 '22 at 01:30

34

In my case I just had to change

import { SetOptional, SetRequired } from 'type-fest';

to

import type { SetOptional, SetRequired } from 'type-fest';

answered Mar 07 '22 at 01:30

Pedro A

3,989
3
32
56

1

@pedro_A you are the real MVP! – German Attanasio Jun 07 '22 at 20:05
so much better than messing around with eslint/ts configs! – Devin Rhode Aug 26 '22 at 19:29
Who would've thought. Can you explain why this solves the problem, or what exactly the problem was? – Bergi Dec 07 '22 at 01:38
@Bergi Hello, unfortunately I don't know for sure hahaha... It feels like I wrote this answer years ago... The fact that this solution works makes me suspect it's a bug with typescript-eslint. – Pedro A Dec 07 '22 at 02:52
It might have something to do with elision of type-only imports, somehow being done at the wrong time. Maybe the import resolver sees only an empty file (since everything was elided)? Or maybe it has something to do with modules whose typings use namespaces, such as [type-fest](https://github.com/sindresorhus/type-fest/blob/b40cb9c8e6dbea84bc99ec9e37bdd636c5cc6565/source/basic.d.ts#L39-L43), since the `import type` syntax interferes with those... (open [the PR that introduced the syntax](https://github.com/microsoft/TypeScript/pull/35200) and search for _"If the symbol is a namespace"_ there) – Pedro A Dec 07 '22 at 02:56

score 30 · Answer 6 · answered Apr 06 '20 at 17:24

30

When using "eslint": "6.8.0" with "typescript": "3.8.3" besides adding the following to .eslintrc:

"settings": {
  "import/resolver": {
    "node": {
      "paths": ["src"],
      "extensions": [".js", ".jsx", ".ts", ".tsx"],
    }
  },
}

You also need to add this line to tsconfig.json under compilerOptions:

"compilerOptions": {
  ...
  // Base directory to resolve non-relative module names.
  "baseUrl": "src",
  ...
}

answered Apr 06 '20 at 17:24

remacr

648
6
6

1

Greatly appreciated to add the `baseUrl` options, saved my day – Tomas Vancoillie Jun 09 '20 at 10:39
4

In my case I had to add .d.ts to the list- the package csstypes only contains an index.d.ts: "settings": { "import/resolver": { "node": { "paths": [ "src" ], "extensions": [ ".js", ".jsx", ".d.ts", ".ts", ".tsx" ] } } } – httpete Sep 29 '20 at 00:55
This can also solve the case when the eslint configuration is shared between several projects and therefore located in a top-level folder. Listing all projects' paths in the `paths` property solves the eslint error. – Evgeniya Manolova Feb 24 '21 at 04:11

score 24 · Answer 7 · edited Nov 18 '21 at 05:54

24

If you've updated your .eslintrc and tsconfig.json files as suggested in the other answers, and you still have the problem - restart vscode.

edited Nov 18 '21 at 05:54

Tomerikoo

18,379
16
47
61

answered Oct 07 '20 at 11:15

Jakob Jan Kamminga

543
5
14

That worked for me!! Thank you :) – Nicolas Feb 02 '22 at 18:09
It didn't work for me. – SalahAdDin Mar 13 '22 at 12:49

score 13 · Answer 8 · answered May 16 '19 at 08:06

13

for those who use babel-module just add the extensions so it would be something like this:

      "babel-module": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"],
        "alias": {
          "app": "./app"
        }
      }

answered May 16 '19 at 08:06

Mr.Ghamkhar

557
8
12

Indeed. My "babel-module" had only {} – ofundefined Dec 29 '21 at 15:07

score 10 · Answer 9 · answered Mar 13 '20 at 18:53

10

Both ts and eslint were barking at me, so I had to add the following to my .eslintrc file:

{ 
    ...
    "rules": {
        ....
        "import/extensions": "off"
    },
    "settings": {
        ....
        "import/resolver": {
            "node": {
                "extensions": [".js", ".jsx", ".ts", ".tsx"]
            }
        }
    }
}

answered Mar 13 '20 at 18:53

Josh Weston

1,632
22
23

I needed both the "settings" and the "rules", as described in this answer. Thanks! – Robin Zimmermann Apr 03 '20 at 21:40
barking!! Hats off – Yogi Apr 28 '20 at 06:11

score 7 · Answer 10 · edited Dec 15 '20 at 23:29

7

First add "plugin:import/typescript" under extends like below :

"extends": [
    "airbnb-base",
    "plugin:import/typescript"
 ],

then below under rules

"rules": {
        "import/extensions": [
            "error",
            "ignorePackages",
            {
                "ts": "never"
            }
        ]
    }

edited Dec 15 '20 at 23:29

shivlal kumavat

868
1
12
28

answered Dec 15 '20 at 13:13

swapnil kale

71
1
1

Typhon · Answer 11 · 2023-02-16T12:21:57.557

When importing locale files for Angular (e.g. import localeEn from '@angular/common/locales/en';), I had to allow the .mjs extension.

Here is an excerpt of my .eslintrc.json:

  ...
  "extends": [
    ...
    "plugin:import/recommended",
    "plugin:import/typescript",
    ...
  ],
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".ts", ".mjs"]
      }
    }
  },
  "rules": {
    ...
  }
  ...

Edit:

When importing HttpClient or HttpClientModule, the error came back. I found out that adding the .d.ts extension to the list fixed the issue, which also make more sense than the .mjs (that is no longer needed).

So here is my new .eslintrc.json:

  ...

  {
    "files": ["*.ts"],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
      "project": ["tsconfig.json"],
      "createDefaultProgram": true
    },
    "settings": {
      "import/resolver": {
        "node": {
          "extensions": [".ts", ".d.ts"]
        }
      }
    },
    "extends": [
      "eslint:recommended",
      "plugin:import/recommended",
      "plugin:import/typescript",
      "plugin:@typescript-eslint/recommended",
      "plugin:@angular-eslint/recommended",
      "plugin:@angular-eslint/ng-cli-compat",
      "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
      "plugin:@angular-eslint/template/process-inline-templates"
    ],
    "rules": {
      ...
    }
  }

  ...

(I'm using @angular-eslint, but you may have a different extends list)

vamcs · Answer 12 · 2021-04-28T08:14:42.250

6

In my case, ESLint wasn't able to resolve the types installed from DefinitelyTyped (@type/ packages), so I had to specify where to find them in .eslintrc like this:

"import/resolver": {
    "typescript": {},
    "node": {
        "extensions": [".js", ".ts"],
        "paths": ["node_modules/", "node_modules/@types"]
    }
},

I also added "typescript": {}, which is basically for using configs from tsconfig.json and I have eslint-import-resolver-typescript installed for it to work.

edited Apr 28 '21 at 08:14

answered Aug 08 '20 at 10:47

vamcs

345
3
12

alternatively, you can just tell it where your node modules are with `'node': { 'moduleDirectory': 'node_modules' }` – Arajay Jun 21 '23 at 01:29

score 2 · Answer 13 · answered Feb 24 '20 at 15:11

In case, if anyone needs to support child directory as well. For an example, it supports

src/components/input => components/input

src/api/external/request => external/request

"settings": {
  "import/resolver": {
    "node": {
      "paths": ["src", "src/api"],
      "extensions": [".js", ".jsx", ".ts", ".tsx"]
    }
  }
}

This is working example for eslint ^6.1.0

score 2 · Answer 14 · answered Apr 21 '20 at 17:12

2

I had to add the typescript import to extends and then turn off the imports in the rules:

"extends": {
    "plugin:import/typescript"
},
"rules": {
    "import/extensions": "off"
}

answered Apr 21 '20 at 17:12

flashmatrix

185
1
2
6

8

this doesn't solve the problem only it turn off the rule – Diego Alberto Zapata Häntsch Sep 09 '21 at 20:37

score 2 · Answer 15 · answered Sep 26 '21 at 15:56

2

For me it was just simply installing eslint-import-resolver-node:

yarn add -D eslint-import-resolver-node
# or
npm install eslint-import-resolver-node --save-dev

answered Sep 26 '21 at 15:56

MegaCookie

5,017
3
21
25

score 2 · Answer 16 · answered Feb 13 '22 at 10:39

My situation with ts monorepo was that I was not getting lint errors in IDE, all aliases were resolved alright, but as soon as I run eslint on one of the projects, I was getting

error  Unable to resolve path to module

It is important to show eslint path to each of your package's tsconfig file.

To sum up and for those with TS, aliases and monorepo:

install eslint-import-resolver-typescript
add to eslintrc.js settings (this will help ide and eslint to figure aliases and stuff):

    'import/resolver': {
      node: {
        paths: 'packages/*/src',
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
      typescript: {
        alwaysTryTypes: true,
        project:[
         path.resolve(__dirname, '.tsconfig.json'), // root tsconfig
         path.resolve(__dirname, './packages/projA/tsconfig.json'),
         path.resolve(__dirname, './packages/projB/tsconfig.json'),
         /* ...rest of projects path to its tsconfig */
        ],
      },

add to eslintrc.js extends:

{
 ...,
   'plugin:import/recommended',
   'plugin:import/typescript',
}

add to eslintrc.js plugins:

  plugins: ['@typescript-eslint', ..., 'import'],

add to eslintrc.js parserOptions (same as to settings) this will help eslint:

        project: [
          path.resolve(__dirname, '.tsconfig.json'), // root tsconfig
          path.resolve(__dirname, './packages/projA/tsconfig.json'),
          path.resolve(__dirname, './packages/projB/tsconfig.json'),
          /* ...rest of projects path to its tsconfig */
        ],

Nice! The `path.resolve(__dirname, '.tsconfig.json')` in `project` resolved it for me. — Omar Omeiri, Sep 06 '22 at 13:31

score 1 · Answer 17 · answered Apr 15 '23 at 15:55

For me, this error was caused by using eslint-config-airbnb. It isn't set up to work properly with typescript. The best fix for that (from this answer) is to install eslint-config-airbnb-typescript. The npm page includes the setup instructions, which involves tweaking your eslint config to load it and pointing it at your typescript config.

Note that if you used create-react-app to set up your app, you'll have an eslintConfig block in package.json. You need to have one ESLint config. If you create an .eslintrc to set up typescript linting, you should delete the block from package.json and move any config from there into the one config file.

Daniel Davidyan · Answer 18 · 2023-07-25T09:22:57.453

The issue was that the paths were not correctly resolving for the source folder. To solve the problem, I added the father of the source folder to the paths as well.

Instead of:

"settings": {
  "import/resolver": {
    "node": {
      "extensions": [".js", ".jsx", ".ts", ".tsx"],
      "paths": ["src"]
    }
  }
}

I made the following modification:

"settings": {
  "import/resolver": {
    "node": {
      "extensions": [".js", ".jsx", ".ts", ".tsx"],
      "paths": ["src", "client/src"]
    }
  }
}

Explanation: By adding the "client/src" path, the resolver can now correctly locate the files within that directory when importing or resolving modules. This change resolved the path resolution issue I was facing in my project.

(Optional: If applicable, mention where the "settings" block should be placed in your project's configuration file, e.g., webpack.config.js, tsconfig.json, etc.)

I hope this solution helps others who encounter a similar problem!

score 0 · Answer 19 · answered Apr 21 '22 at 21:23

0

In my case, I had to delete the eslint cache, and then it worked like a charm. (Our yarn script is

"lint:eslint": "eslint . --cache --cache-location '../../eslintcache/' --format stylish"

.)

answered Apr 21 '22 at 21:23

Katie Byers

822
8
16

score 0 · Answer 20 · answered Aug 31 '23 at 00:24

In 2023 this helps me

  env: { browser: true, es2020: true, node: true },
  extends: [
    'plugin:react/recommended',
    'airbnb',
    'airbnb-typescript',
    'airbnb/hooks',
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
    'plugin:import/recommended',
    'plugin:import/typescript',
    'prettier',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: './tsconfig.json',
    ecmaVersion: 2018,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
    // Airbnb disable eslint-import-resolver-typescript
    // See: https://github.com/iamturns/eslint-config-airbnb-typescript#why-is-importno-unresolved-disabled
    // But, To support the tsconfig baseUrl and paths for aliasese that we uses,
    // you need this package
    // See configuration here
    // https://github.com/alexgorbatchev/eslint-import-resolver-typescript#installation

    'import/parsers': {
      '@typescript-eslint/parser': ['.ts', '.tsx'],
    },
    'import/resolver': {
      typescript: {
        alwaysTryTypes: true,
      },
    },

score -18 · Answer 21 · answered Mar 26 '22 at 14:46

-18

Awesome people know how to solve this by oneliner in 2022:

"rules": {
  "import/extensions": [ "error", "ignorePackages", { "": "never" } ]
}

answered Mar 26 '22 at 14:46

NeoZoom.lua

2,269
4
30
64

1

ignoring a problem and fixing a problem are very different solutions. – Chunky Chunk Jun 14 '22 at 20:00
@ChunkyChunk: But the accepted one didn't work during my writing. – NeoZoom.lua Jun 15 '22 at 10:55
Nice title as well, nice job! – Friedrich Aug 05 '22 at 12:14

Using eslint with typescript - Unable to resolve path to module

21 Answers21

Awesome people know how to solve this by oneliner in 2022:

Linked