Using eslint with typescript - Unable to resolve path to module

183
votes

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;
12
typescripteslint
Have you added "plugins": ["@typescript-eslint"]? Docs github.com/typescript-eslint/typescript-eslint/tree/master/… – Jasmonate
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' – maximedupre
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! – Abulafia
Can you add the content of your app.ts file ? – Eastrall

12 Answers

400
votes

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.

89
votes

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

This does it for me:

.eslintrc.js

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

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

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

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

I got stuck on this problem for two hours, all the while a simple restart would've made the editor find the module.

Hope this saves someone else the time!

6
votes

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

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"
        }
      }
4
votes

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

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.

3
votes

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"
}
1
votes

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

  1. src/components/input => components/input

  2. 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