How to manually add a path to be resolved in eslintrc

WebpackEslintResolve

Webpack Problem Overview


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.

Webpack Solutions


Solution 1 - Webpack

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.

Solution 2 - Webpack

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']
       ]
     }
  }
}

Solution 3 - Webpack

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.

Solution 4 - Webpack

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

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

Solution 5 - Webpack

My work wettings .eslintrc.js

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

and tsconfig.json

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

Solution 6 - Webpack

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

Solution 7 - Webpack

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"
    }
  }
}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionwlingkeView Question on Stackoverflow
Solution 1 - WebpackSota SugiuraView Answer on Stackoverflow
Solution 2 - WebpackjohvinView Answer on Stackoverflow
Solution 3 - WebpackPavelView Answer on Stackoverflow
Solution 4 - WebpackZip184View Answer on Stackoverflow
Solution 5 - WebpackKirill CherkalovView Answer on Stackoverflow
Solution 6 - WebpackDavidView Answer on Stackoverflow
Solution 7 - WebpackFinelfView Answer on Stackoverflow