react-starter-kit: ESLint: Unable to resolve path to module

“import/no-unresolved”: “off”

(as temporary solution)

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

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

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

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

I think you can add a code recipe for this.

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

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

// .eslintrc.json

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

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

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

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?

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.

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.

Maybe you should track this project.https://github.com/benmosher/eslint-plugin-import/issues/496

Working Fine for module aliases.

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

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

You have the option of this lib here

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