CODEWITHSUNDEEP
javascriptreactjswebpackwebstormeslint
user10516706
user10516706

Reputation:

Using Webpack alias cause to ESLint error on import alias in WebStorm

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:

enter image description here

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:

enter image description here

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?

Upvotes: 7

Views: 3424

Answers (1)

lena
lena

Reputation: 93728

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

Upvotes: 1

Related Questions