ESLint: Unable to resolve path to module

[comerc]

We have solution for absolute path, like this:

import MyComponent from 'src/components/MyComponent'

It is work fine for yarn start, but for yarn lint:

Unable to resolve path to module 'src/components/MyComponent'     import/no-unresolved

I have solution for my other project (no RSK) with WebStorm:

1. project_dir - Mark Directory as > Resource Root

2. yarn add eslint-import-resolver-webpack -D

3. config/default.js

...
	resolve: {
		// We can now require('file') instead of require('file.jsx')
		extensions: ['', '.js', '.jsx', '.scss'],
		alias: {
			src: path.resolve(__dirname, '../src')
		}
	},
...

4. .eslintrc.js

/* global __dirname */

const path = require('path');

...
	settings: {
		'import/resolver': {
			webpack: {
				config: path.join(__dirname, '/config', 'default.js')
			}
		}
	}
...

How to solve this issue for RSK? Please help me.

[comerc]

"import/no-unresolved": "off"

(as temporary solution)

[Stupidism]

Maybe you should track this project.import-js/eslint-plugin-import#496

[Stupidism]

Aha~ I'm facing a same issue like you
I wanted to do absolute imports with a special prefix(So I can tell what's extenal easily). #1193
I fixed the mocha test to work with this using-webpack-aliases-in-mocha-tests/
Now I don't know how to eslint it.
I used to solve this problem by eslint-import-resolver-webpack in another project. However, it seems not working with newest webpack.

[Stupidism]

Update: you will face the test problem, too.

[Stupidism]

Here is the answer for eslint
Here is the answer for mocha

I think you can add a code recipe for this.

[karanssj4]

try this https://gist.github.com/karanssj4/7188528ab36fb4e78c8fc385510f3136

[MattEhrlich]

For me it was a case sensitivity issue. I opened the project using atom . which gave me path /desktop/apps/my_app when i go into atom and open the project manually it's actually at /Desktop/apps/my_app this gets rid of the error for me.

[lucasdu4rte]

You have the option of this lib here

https://github.com/unconfident/eslint-import-resolver-babel-plugin-root-import

[skube]

As @karanssj4 linked to, this seems to be fixed by adding the following to .eslintrc

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

[denisinla]

If you crawled through here from google and have absolute paths when importing resulting in eslint screaming at you NOT FOUND:

Use eslint-plugin-import:

// App.js
import { ComponentName } from 'components/ComponentName';

// .eslintrc.js
module.exports = {
  ...   
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src"],
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    },
  },
}

[moelzanaty3]

// .eslintrc.json

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

[piavgh]

You can use this package https://www.npmjs.com/package/eslint-import-resolver-webpack

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

[vianneyguesdon]

Solved here for TS :
https://stackoverflow.com/questions/55198502/using-eslint-with-typescript-unable-to-resolve-path-to-module

[saravanakumargn]

"settings": {
        "import/resolver": {
          "node": {
            "paths": ["src"],
            "extensions": [".js", ".ts", ".d.ts"]
          }
        }
      }

[dbeetoven]

If you crawled through here from google and have absolute paths when importing resulting in eslint screaming at you NOT FOUND:

Use eslint-plugin-import:

// App.js
import { ComponentName } from 'components/ComponentName';

// .eslintrc.js
module.exports = {
  ...   
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src"],
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    },
  },
}

great solution thanks

[milieu]

I just needed

"settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx"]
      }
    },
  }

🎉

[ploth]

For people using eslint + webpack + single repo

// .eslintrc.js
module.exports = {
  ...   
  "settings": {
    "import/resolver": {
       node: {
         paths: [".", "app", "lib", "functions"], //name the subproject folders here!!!
         extensions: [".js", ".jsx", ".ts", ".tsx"]
      }
    },
  },
}

and you may want some overrides if using storybook

// .eslintrc.js
module.exports = {
  ...   
  overrides: [
    {
      files: ["**/*.stories.tsx", "backend/**/*", "storybook/**/*"],
      rules: {
        "import/no-unresolved": "off",
      },
    },
  ],
}

[Noxiess]

Unable to resolve path to module 'buefy'

[vijaybajrot]

Working Fine for module aliases.

https://github.com/johvin/eslint-import-resolver-alias

[Sedose]

"import/no-unresolved": "off"

Where to put this? Which file?

[soujvnunes]

"import/no-unresolved": "off"

Where to put this? Which file?

.eslintrc.json file at app root.

[salmagomaa]

For me it is fixed by https://stackoverflow.com/a/71874257/1770571

[paoloose]

What if I already have a baseUrl and custom aliases for paths in my jsconfig.json like this?

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/components/*": ["components/*"],
            "@/styles/*": ["styles/*"],
            "@/public/*": ["public/*"],
            "@/hooks/*": ["hooks/*"]
        }
    }
}

After I setup eslint, the import aliases doesn't work anymore, how can I tell eslint to respect the jsconfig.json compiler options?

[umerfarooq1997]

In .eslintrc.json File

Add this lines

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