使用Webpack别名会导致WebStorm中导入别名的ESLint错误

Question

I set the alias Webpack config by the following code:

module: {
...
resolve: {
  alias: {
    utils: path.resolve(__dirname, 'src/utils/'),
    '@SharedBlocks': path.resolve(__dirname, 'src/application/shared-blocks'),
  },
  extensions: ['.js', '.json', '.jsx', '.scss'],
},
...

Then I find the ESLint error out in WebStorm like below:

Definitely, the ESLint cannot resolve '@SharedBlocks/explorer' so I add an import/resolver to .eslint.js file to configure it:

settings: {
  "import/resolver": {
    webpack: {
      config: "webpack.template.js",
    }
  }
},

Now everything works well in all editors like VSCode and etc. but just in WebStorm I see below:

It is so weird because even running eslint . command doesn't return ESLint rules error but JUST in WebStorm I see red underline for import also works well but show red underline for import . It's so weird that VSCode has no any problem and works well

How can I fix it?

Answer 1

no-extraneous-dependencies ESLint rule doesn't consider EsLint resolvers, see https://github.com/benmosher/eslint-plugin-import/issues/496 . I'm not sure though why the error can only be seen in WebStorm. I'd suggest contacting support on this