How to manually add a path to be resolved in eslintrc

Question

I have a folder in my project main that I am resolving like a module. For instance import x from 'main/src' imports main/src/index.js. This is done through webpack's resolve alias configuration.

An issue I am having is getting rid of the errors via eslint. I know eslint provides a webpack resolve plugin, however, I've been having trouble getting it to work. I suspect it is because I am on webpack 2 and using es6 in my webpack config files.

Is there a manual way to write a resolve setting that fixes this problem for my eslint?

The only other hack I've seen work is using import/core-modules but then I have to list out every folder in the subdirectory tree main/src/bar, main/src/foo. This would not be ideal.

score 175 · Accepted Answer · answered Feb 28 '17 at 00:24

175

I think the link below helps you. You can add resolving directories by using config.

https://github.com/benmosher/eslint-plugin-import#resolvers

For example, if you want to resolve src/, you can write like below on .eslintrc.

{
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src"]
      }
    }
  }
}

Then ESLint resolve from src directory. You can require src/hoge/moge.js by writing const moge = require('hoge/moge'); and ESLint knows it.

answered Feb 28 '17 at 00:24

Sota Sugiura

1,882
1
9
4

ESLint configuration is invalid: - Unexpected top-level property "settings". – Jul 02 '17 at 11:13
Great solution for resolving in WebStorm IDE, but webpack is trying to install these modules: `import {STATE_FICHE as initialState} from 'data-srtuctures/fiche';` webpack says: `Installing data-srtuctures...` and fails. Is there any solutions for Webpack2? – lazy.lizard Oct 19 '17 at 12:11
1

This solution works for files within src. However eslint could not resolve path for files at root. How can that be resolved? – StangSpree Apr 23 '20 at 15:33

score 22 · Answer 2 · answered Apr 25 '18 at 06:45

Too late to see this question. Actually, there is already a resolver named eslint-import-resolver-alias that implements this functionality with the below setting.

{
  settings: {
    'import/resolver': {
      'alias': [
        ['main/src', './main/src']
       ]
     }
  }
}

score 19 · Answer 3 · answered Oct 02 '19 at 18:06

I was facing similar problem: ESLint was not able to resolve the modules imported relative to instruction "baseUrl": "src" in my tsconfig.json.

Managed to solve the problem in a similar to the marked as a solution answer, except I had to add the extensions array. So I added the following to my .eslintrc.js:

  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
        paths: ['./src']
      }
    }
  },

Hope this helps someone. The source of my solution is actually the package's npm page.

score 12 · Answer 4 · answered Sep 14 '19 at 21:11

12

I had the same issue with webpack. I installed eslint-import-resolver-webpack and updated .eslintrc thusly

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

answered Sep 14 '19 at 21:11

Zip184

1,792
2
21
34

where is all the rest of the path's configuration? this pasted code is enough? – vsync May 14 '20 at 14:05
1

The path config is the standard webpack alias config. In the webpack config file under resolve: { alias: {...} }. This code just points eslint to use webpack's path config instead of its own. – Zip184 May 15 '20 at 14:52
2

This code also assumes that your webpack config is in the default webpack.config.js file. If it's different (like if you have a separate dev/prod configs), you can specify a webpack file like this: "settings": { "import/resolver": { "webpack": { "config": "webpack.dev.config.js" } }, ... – Zip184 May 15 '20 at 14:54

score 11 · Answer 5 · answered Jun 20 '20 at 14:04

11

My work wettings .eslintrc.js

  settings: {
    'import/resolver': {
      node: {
        paths: ['.'],
      },
    },
  },

and tsconfig.json

{
  "compilerOptions": {
    ...
    "baseUrl": "./",
    ...
  },
}

answered Jun 20 '20 at 14:04

Kirill Cherkalov

141
1
4

3

Wow... why isn't that the default -.- – muuvmuuv Dec 09 '20 at 19:07
Cool worked for .eslintrc.js... Thanks :) – Gvs Akhil Oct 07 '21 at 05:14

score 3 · Answer 6 · answered Feb 26 '20 at 11:59

For my case I was getting eslint such error in React, when I was trying to import react-native-svg package there. I did it since I was using one code-base for both React and React-Native. So fo me the following code worked in .eslintrc:

"import/no-unresolved": [
  2,
  {
    ignore: [
      'react-native-svg'
    ]
  }],

Hope this will help someone else

score -1 · Answer 7 · answered Apr 30 '21 at 08:25

-1

As Zip184 stated in coment above If you have multiple webpack configurations, you have to specify the path to the config

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

answered Apr 30 '21 at 08:25

Finelf

11
3

How to manually add a path to be resolved in eslintrc

7 Answers7

Linked