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?

Cheers!

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;

Solution 1

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.

Solution 2

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

Solution 3

This does it for me:

.eslintrc.js

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

Solution 4

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": {}
    },
  },
}

Solution 5

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",
  ...
}

View more solutions

Comments

[Jasmonate]

Have you added "plugins": ["@typescript-eslint"]? Docs github.com/typescript-eslint/typescript-eslint/tree/master/…

[Maxime Dupré]

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'

[Abulafia]

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]

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!

[Eastrall]

Can you add the content of your app.ts file ?

[Maxime Dupré]

Hey @Abulafia! Unfortunately, I am not using webpack...

[Maxime Dupré]

@Eastrall I edited the question with the content of app.ts :)

[KyleMit]

If all else fails, you can try deleting node_modules, reinstalling, and restarting TS server

[Izhaki]

I believe the other answer is the right solution for this.

[Epoch]

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.

[Tevon Strand-Brown]

This worked for me as well. Note that HAD to add the "moduleDirectory" key.

[Robin Zimmermann]

I needed both the "settings" and the "rules", as described in this answer. Thanks!

[Yogi]

barking!! Hats off👏🏻

[Yan Yankowski]

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.

[underscore]

works after adding moduleDirectory: ['node_modules', 'src/']

[Tomas Vancoillie]

Greatly appreciated to add the baseUrl options, saved my day

[charlax]

Thanks! Adding "plugin:import/typescript" is what fixed it for me.

[httpete]

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

[Ryan]

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]

Ahh, 'import/extensions': 0, helped: stackoverflow.com/questions/56064609/…

[brianyang]

this is the only one that worked for me, just add this line and save. the error went right away!

[MasterWil]

Note that you need to 1. place "plugin:import/typescript" after "airbnb-base". 2. Remember to add "import" in plugins section.

[Evgeniya Manolova]

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.

[semkeijsper]

This is the only one that worked for me when using a monorepo and a path alias to a different package.

[Jalal]

@Semx11, Same here!

[Volodymyr Bobyr]

now i get Missing file extension "ts" for <file>

[Volodymyr Bobyr]

^ fixed with: stackoverflow.com/a/59268871/12658818

[c0dezer019]

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!

[Diego Alberto Zapata Häntsch]

this doesn't solve the problem only it turn off the rule

[Sandeep vashisth]

This worked for me using the same config in .eslintrc.json in the typescript react project.

[Kristóf Dombi]

For some reason by just having "plugin:import/typescript", did not solved this problem for me. The solution was to use this: github.com/alexgorbatchev/eslint-import-resolver-typescript

[June]

it's only solution for me thx ;)

[FR073N]

` "typescript": {} ` did the trick for me.

[ofundefined]

Indeed. My "babel-module" had only {}

[Nicolas]

That worked for me!! Thank you :)

[julianYaman]

Thanks for this solution, the other ones didn't really help in my use case

[Paul P]

This worked for me with Quasar v1 (quasar create <project> --branch v1) and airbnb-base ESLint config.

[SalahAdDin]

It didn't work for me.

[Kristi Jorgji]

this works with nextjs, thanks

[VimNing]

Hey, hey you, 2022 readers! Take a look at my one-line solution: stackoverflow.com/a/71629047/5290519

[shamaseen]

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.

[Oleksandr Danylchenko]

Thanks! Missing eslint-import-resolver-typescript was the issue!

[Nivethan]

this solved the path alias issue in a react-native cli project

[German Attanasio]

@pedro_A you are the real MVP!

[Hazy]

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

[Chunky Chunk]

ignoring a problem and fixing a problem are very different solutions.

[VimNing]

@ChunkyChunk: But the accepted one didn't work during my writing.

[Juanma]

this is what did the trick for me. I was missing this step. Thanks