eslint resolve error on imports using with path mapping configured jsconfig.json
I have installed:
npm install -D eslint-import-resolver-alias
And I added to my eslint config file:
eslintrc.json
"settings": {
"import/resolver" : {
"alias" : {
"map" : [
["@components","./src/components/"]
],
"extensions": [".js"]
}
}
}
And now it's working and eslint is not showing errors anymore.
EDIT:
I'm using webpack and I also needed to do:
webpack.config.js
resolve: {
alias: {
'@components': path.resolve(__dirname, 'src/components/')
}
}
for lerna users:
eslintrc
{
"settings": {
"import/parsers": {
"@typescript-eslint/parser": [".js", ".jsx", ".ts", ".tsx"]
},
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"],
// this resolves path alias import problems
"moduleDirectory": [ "apps/*/src", "packages/*/src" ]
},
"typescript": {
"alwaysTryTypes": true,
// this resolves packages import problems
"project": [
"packages/*/tsconfig.json",
"apps/*/tsconfig.json"
]
}
}
}
}
An alternative way, assuming that you have eslint-plugin-import
installed (in your devDependencies). Just add this "settings" in your .eslintrc.json
file.
.eslintrc.json
{
"settings": {
"import/resolver": {
"node": {
"moduleDirectory": ["node_modules", "src/"]
}
}
}
}
jsconfig.json
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
Then you can just call the
import SomeComponent from 'components/SomeComponent';`