eslint error showing with webpack alias
Here is what worked for me:
I installed eslint-import-resolver-alias as dev dependency:
npm install eslint-plugin-import eslint-import-resolver-alias --save-dev
In the Webpack config (in my case, it was Vue config, which is merged with Webpack config by Vue-cli), I added a few aliases:
resolve: { extensions: ['.js', '.vue', '.json', '.less'], alias: { Site: path.resolve(__dirname, 'src/site'), Admin: path.resolve(__dirname, 'src/admin'), Common: path.resolve(__dirname, 'src/common'), Assets: path.resolve(__dirname, 'src/common/assets'), Configs: path.resolve(__dirname, 'src/common/configs'), Style: path.resolve(__dirname, 'src/common/style') } }
In the .eslintsrc (or .eslintsrc.js, if you use that), I added the plugin and maps for these aliases, as follows:
"extends": ["plugin:import/recommended"], "settings": { "import/resolver": { "alias": { "map": [ ["Site", "./src/site"], ["Admin", "./src/admin"], ["Common", "./src/common"], ["Assets", "./src/common/assets"], ["Configs", "./src/common/configs"], ["Style", "./src/common/style"] ] }, "extensions": [".js", ".less", ".json", ".vue"] } }
I have added extensions for clarity and some good measures, which you can choose to not use for yourself.
Optional:
If you use VS Code and want these aliases working with the path intellisense, add a file jsconfig.json at the root, and specify your alias paths:
{
"compilerOptions": {
"target": "esnext",
"allowSyntheticDefaultImports": false,
"baseUrl": "./",
"paths": {
"~/*": ["src/*"],
"Root/*": ["src/*"],
"Site/*": ["src/site/*"],
"Admin/*": ["src/admin/*"],
"Common/*": ["src/common/*"],
"Assets/*": ["src/common/assets/*"],
"Configs/*": ["src/common/configs/*"],
"Style/*": ["src/common/style/*"]
}
},
"exclude": ["node_modules", "dist"]
}
There are additional settings for React and Typescript. Check the documentation at official site.
Thanks, Pranav for the solution to this issue!
I add some code to this post to make it more practical for others.
First of all, in webpack config file I had defined this alias:
alias:{
components: path.resolve(__dirname, "src", "components")
}
That allow me to import components in my app in that way:
import NewsFeed from 'components/NewsFeed'
I have installed eslint-import-resolver-webpack
plugin and put below code into .eslintrc.js or .eslintrc file :
settings: {
'import/resolver': {
alias: {
map: [
['components', './src/components']
]
}
}
That's it after running linter I got rid of Unable to resolve path to module 'components/NewsFeed'
error message
Hope it will be helpful for some of you!
This issue can be resolved by using the eslint-import-resolver-webpack