使用 webpack 别名显示 eslint 错误

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

This issue can be resolved by using the eslint-import-resolver-webpack

Answer 3

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.

Answer 4

Another way, without mapping aliases between webpack.config.js and .eslintrc .

You can use eslint-import-resolver-webpack and setup you .eslintrc file like this:

{
  "extends": [
    "@hrplatform"
  ],
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"],
        "moduleDirectory": [
          "node_modules",
          "src"
        ]
      }
    }
  }
}