How I can change eslint resolve settings

Question

I have project where I use webpack, eslint. Through webpack.config I set to resolve index and Index files. Everything works, except that eslint throws errors import/no-unresolved and import/extensions, it doesn't know, that beside of index, now it should resolve Index files too (import Index from ./components, where in ./components have file Index.jsx). My settings below.

// .eslintrc
{
  "extends": "airbnb",
  "env": { "browser": true },
  "rules": {
    "no-restricted-syntax": "off",
    "no-continue": "off",
    "no-plusplus": "off",
    "react/prop-types": "off",
    "no-underscore-dangle": "off",
    "no-param-reassign": "off",
    "class-methods-use-this": "off"
  }
}

// package.json
// ...
 "devDependencies": {
    // ...
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.10.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.7.0",
    // ...
 }
// ...

Solution

Try installing eslint-import-resolver-webpack and adding this to your .eslintrc:

"settings": {
  "import/resolver": "webpack"
}

Or adding the source folder from which it will resolve the dependencies; something like this:

settings: {
    'import/resolver': {
        node: {
            paths: [path.resolve(__dirname, 'src')],
        },
    },
}

Resolver documentation: https://github.com/benmosher/eslint-plugin-import/blob/master/README.md#resolvers

Comments

[Wayrex]

don't forget to mark the answer as correct if it is.

[Johannes Pille]

"react/prop-types": "off" is a really bad idea.

[ario]

When I use "import/resolver": "webpack", I get "TypeError: Cannot read property 'externals' of undefined" when linting

[Wayrex]

@ario seems it might be related to this bug: github.com/benmosher/eslint-plugin-import/issues/1219. Check if the latest version fixes the issue.

[StangSpree]

This solution works for files within src. However eslint could not resolve path for files at root.