Eslint doesn't respect jsconfig paths

Question

I have my express.js project in monorepo. I want to add custom path alias to it. The directory structure is:

./
server/
----> jsconfig.json
----> .eslintrc.js
----> src/
--------> index.js
--------> modules/auth
-------------> auth.controller.js

jsconfig.json

{
  "compilerOptions": {
    "module": "ES6",
    "baseUrl": "./",
    "paths": {
      "@modules/*": [
        "src/modules/*"
      ]
    }
  },
  "exclude": ["node_modules"]
}

.eslintrc.js

module.exports = {
  env: {
    es2021: true,
    node: true,
  },
  extends: [
    'airbnb-base',
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  rules: {
    'no-console': 'error',
    'no-debugger': 'error',
  },
  settings: {
    'import/resolver': {
      alias: {
        map: [
          ['@modules/*', 'src/modules/*'],
        ],
        extensions: ['.js', '.json'],
      },
    },
  },
};

Simply, I just tried to import auth controller in my index.js file.

import authRoutes from '@modules/auth/auth.routes';

but I get the following error: Unable to resolve path to module '@modules/auth/auth.controller' .eslint import/no-unresolved

please, don't suggest to turn off the rule. I've alreadyy tried eslint-import-resolver-jsconfig, but I got Cannot resolve jsConfig, SyntaxError } on 150.

score 3 · Accepted Answer · edited Oct 31 '21 at 08:36

Because I used monorepo, there was a problem for ESLint or even lint-staged. So now I have only one project per repository and:

Added custom paths in jsconfig.json:

"paths": {
      "@modules/*": [
        "./src/modules/*"
      ]
    }

Installed eslint-import-resolver-jsconfig and added the following configuration to the eslint.json:

"extends": [
    "airbnb-base",
    "eslint:recommended"
  ],
 "plugins": ["import"],
 "settings": {
    "import/resolver": {
      "jsconfig": {
        "config": "jsconfig.json"
      }
    }
  }

Installed the Babel plugin babel-plugin-module-resolver and added the following settings to the .babelrc:

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

But, again: This only works if you have one project per repository and all your configuration files (.*rc, package.json, etc) are in the root level.

score 0 · Answer 2 · answered Oct 23 '21 at 12:54

0

To achieve the above I use the module-alias package.

After installing it as a normal dependency, npm i --save module-alias, add the following to your package.json:

"_moduleAliases": {
  "@modules": "./src/modules"
}

That will basically define the mappings for all the aliases you want to define.

To make it work, you will now need to import the following on top of your application under index.js:

require("module-alias/register"); // If using commonJS
// or
import "module-alias/register"; // If transpiling es6

You are now all set and should be able to import your files with absolute paths looking as:

const authRoutes = require("@modules/auth/auth.routes")
// or
import authRoutes from "@modules/auth/auth.routes";

In case eslint still flags the unresolved path, you may need to update your jsconfig.json or tsconfig.json to contain the below:

"paths": {
   "@modules/*": ["src/modules/*"]
}

You can find the package documentation and read more about its usage here.

answered Oct 23 '21 at 12:54

ale917k

1,494
7
18
37

Thank you, but it doesn't work. Actually jsconfig.json already allow me to have actual path alias, but eslint doesn't respect it. I've also tried this module-alias, but had the same result. – natikos Oct 23 '21 at 13:02
That might be because of your project structure, as you seem to have multiple directories within your project. If you use vscode, you can create a `.vscode` folder at the root of your repo, then create a `settings.json` file and add the following: ```{ "eslint.workingDirectories": ["./server", "./other-dirs-you-need-to-map"] } ``` You may need to restart your IDE before it detects the changes. – ale917k Oct 23 '21 at 13:09
Do you mean do this alongside module-alias package? Because, I did, and it's not helped. – natikos Oct 23 '21 at 13:11
Yes, please give that a try as that's the exact way I setup my projects (although I only write TS) - So this should technically work – ale917k Oct 23 '21 at 13:14
This may actually be what you need since the project is in pure js: https://stackoverflow.com/a/57192652/11895568 – ale917k Oct 23 '21 at 13:26
I've tried module-alias package, but eslint still complains about alias import. I also added .vscode folder and its content, paths to jsconfig, but I haven't succeeded. – natikos Oct 30 '21 at 08:54

Eslint doesn't respect jsconfig paths

2 Answers2