eslint error showing with webpack alias

Question

In my webpack config. I defined aliases

alias: {
            components: 'src/components/',
            config: 'src/config/'
}

When I import a module from this path an eslint error occurred.

import ShadowWrapper from 'components/ShadowWrapper'

error 'components' should be listed in the project's dependencies. Run 'npm i -S components' to add it import/no-extraneous-dependencies

Answer 1

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!

Answer 2

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.