Eslint-plugin-import: eslint-import-resolver-webpack Ignores `resolve.root`

[machineghost]

I have a setup that relies on Webpack's resolve.root. I've set my root to "frontend/src", allowing me to do:

import foo from "components/foo";

instead of:

import foo from "frontend/src/components/foo";

However, ESLint is confused by this and erroneously throws:

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

To try and fix things I installed the Webpack import plugin ...

npm install eslint-import-resolver-webpack --save-dev

and I configured my .eslintrc to use it ...

{
  "extends": "airbnb",
  // stuff
  "settings": {
    "import/resolver": {
      "webpack": {
        "config": "webpack.eslint.config.js",
      }
    }
  }
}

and to avoid issues I created a separate Webpack config file just for ESLint:

var path = require('path');
module.exports = {
  resolve: {
    root: path.resolve('frontend', 'src')
  }
};

... but still, when I run ESLint I get the no-extraneous-dependencies errors. Which begs the question: how can I fix things so that ESLint takes my Webpack resolve.root in to account when resolving imports?

Currently even if I run ESLint with --debug "webpack" isn't included in the output (at least as far as I could see), so perhaps my first question should be: how can I know if the resolver is being used? Once I establish that I suspect I'll then want to know ...

• now that I know the Webpack loader is being used, how can I confirm it's using the correct Webpack config file?
• once I confirm that it's using the correct Webpack config, how can I determine if it's working (I've read in other issue threads that, for instance, ES6 Webpack configs fail to work)?
• once I confirm that the config file is being read properly, how can I confirm that the resolve.root is being considered?
• once I confirm that the resolve.root is being considered ... well at that point I guess if I'm still having difficulty it's probably not the plug-ins fault

Also, based on the other issue threads I saw, my issue seems like a common one. If the above answers/debugging steps could be added to the README.md I suspect you'll significantly reduce the number of issues filed by annoying users like myself :-)

[siemiatj]

I on the other hand have my app folder in resolve.modules and also getting import errors.

[oferrero]

I'm experiencing the same problems @machineghost described. Gave up for now and I'm currently using babel-plugin-module-resolver along with the corresponding ESlint plugin.

[rojobuffalo]

I'm experiencing a near identical problem as @machineghost. Webpack recognizes the resolve configuration and works properly. eslint throws a false/positive. I can confirm, as mentioned by @oferrero, that babel-plugin-module-resolver was able to make it work though.

npm install -D eslint-import-resolver-webpack

webpack.config.js

...
  resolve: {
    root: PATHS.root,
    alias: {
      shared: PATHS.shared,
    },
  },
};

.eslintrc

settings:
    import/resolver: webpack

component

import TransitionWrapper from 'shared/components/TransitionWrapper';

Throws eslint errors:

Unable to resolve path...
'shared' should be listed in the projects dependencies

[faucct]

It is possible that you are using webpack of version greater than 2 and it does not have a resolve.root option anymore: it is resolve.modules now.

[ljharb]

Closing; happy to reopen if it's still relevant.