eslint error showing with webpack alias

Here is what worked for me:

  1. I installed eslint-import-resolver-alias as dev dependency:

    npm install eslint-plugin-import eslint-import-resolver-alias --save-dev

  2. 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')
         }
     }
    
  3. 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