Using eslint with typescript - Unable to resolve path to module
TypescriptEslintTypescript Problem Overview
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;
Typescript Solutions
Solution 1 - Typescript
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 - Typescript
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 - Typescript
This does it for me:
.eslintrc.js
{
...
settings: {
...
'import/resolver': {
node: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
moduleDirectory: ['node_modules', 'src/'],
},
},
}
}
Solution 4 - Typescript
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 - Typescript
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",
...
}
Solution 6 - Typescript
If you've updated your .eslintrc
and tsconfig.json
files as suggested in the other answers, and you still have the problem - restart vscode.
Solution 7 - Typescript
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"
}
}
Solution 8 - Typescript
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"]
}
}
}
}
Solution 9 - Typescript
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"
}
]
}
Solution 10 - Typescript
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"
}
Solution 11 - Typescript
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.
Solution 12 - Typescript
In my case I just had to change
import { SetOptional, SetRequired } from 'type-fest';
to
import type { SetOptional, SetRequired } from 'type-fest';
Solution 13 - Typescript
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
Solution 14 - Typescript
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
Solution 15 - Typescript
When importing locale files for Angular (e.g. import localeFr from '@angular/common/locales/fr';
), 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": {
...
}
...
Solution 16 - Typescript
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 */
],
Solution 17 - Typescript
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"
.)
Solution 18 - Typescript
Awesome people know how to solve this by oneliner in 2022:
"rules": {
"import/extensions": [ "error", "ignorePackages", { "": "never" } ]
}