How to manually add a path to be resolved in eslintrc
WebpackEslintResolveWebpack 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"
}
}
}