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;
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.
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"
}
}
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",
],
This does it for me:
.eslintrc.js
{
...
settings: {
...
'import/resolver': {
node: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
moduleDirectory: ['node_modules', 'src/'],
},
},
}
}
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"]
}
}
}
}
In case, if anyone needs to support child directory as well. For an example, it supports
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
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",
...
}
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"
}
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:
eslint-import-resolver-typescripteslintrc.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 */
],
},
eslintrc.js extends:{
...,
'plugin:import/recommended',
'plugin:import/typescript',
}
eslintrc.js plugins: plugins: ['@typescript-eslint', ..., 'import'],
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 */
],
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
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": {
...
}
...
If you've updated your .eslintrc and tsconfig.json files as suggested in the other answers, and you still have the problem - restart vscode.
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"
}
]
}
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.
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": {}
},
},
}