How to make eslint resolve paths mapped in jsconfig

Question

In my nextjs project I have mapped path in jsconfig.json to make easy absolute imports

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["./*"]
    },
    "target": "es6",
    "module": "commonjs",
    "experimentalDecorators": true
  }
}

My import paths look like this import { VIEW } from '@/src/shared/constants';

My eslintrc.js has settings specified as

module.exports = {
    ... ,
    settings: {
        "import/resolver": {
          alias: {
            extensions: [".js"],
            map: ["@", "."]
          }
        }
      }
}

I am still getting the error saying can't resolve "@/what/ever/my/path/is"

How do I make eslint realize the jsconfig path

Answer 1

I was using babel-eslint as my parser in eslintrc. While searching, I realized I need to add babel-plugin-module-resolver in babelrc to resolve the modules. In this file we can define our mapped paths which are there in our jsconfig.

Hence adding the following plugin in the babelrc file compiled my code successfully.

[
    "module-resolver",
    {
        "alias": {
          "@": "./"
        }
    }
]

Answer 2

According to the docs for eslint-import-resolver-alias, the map property should be an array of arrays, so try this:

module.exports = {
    ... ,
    settings: {
        "import/resolver": {
          alias: {
            extensions: [".js"],
            map: [ ["@", "."] ]
          }
        }
      }
}

Also, double-check that you actually have eslint-import-resolver-alias installed - it's easy to forget!