React-starter-kit: 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.https://github.com/benmosher/eslint-plugin-import/issues/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"]
      }
    },
  },
}

[mohammedelzanaty]

// .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