how can i use absolute paths in same library in NX monorepo

Question

I am working on Nx monorepo. We have 5 library and are using imports like this '../../components/Button' in library. but instead of this, we want to use absolute imports.

For example:

there are 2 files in same library: libs/shop/containers/Basket.js , libs/shop/components/Button.js

in Basket.js I want to import like this 'components/Basket' instead of '../../components/Button'.

I added baseUrl and paths config in library tsconfig but it's not working.

library tsconfig
{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "jsx": "react-jsx",
    "allowJs": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": ".",
    "paths": {
      "*": ["./src/lib/*"]
    }
  },
  "files": [],
  "include": [],
  "references": [
    {
      "path": "./tsconfig.lib.json"
    },
    {
      "path": "./tsconfig.spec.json"
    }
  ]
}

Eisenberg

Add the correct path rule (e.g. "@components/shop/*": ["libs/shop/src/lib/*"],) to the tsconfig.base.json paths object. – Hurlow

yes, it works. but eslint gives an error in this case, I want to find the correct way that eslint won't give error – Eisenberg

what error do you get? – Hurlow

Projects should use relative imports to import from other files within the same project. Use "./path/to/file" instead of import from "@components/shop/containers/Filter/actions" (eslint@nrwl/nx/enforce-module-boundaries) this error – Eisenberg

@Eisenberg Have you found an answer here? I'm trying to do the same thing and I'm not sure there's a way. – Mallen

I found a workaround but it breaks circular dependency. As far as I researched there is no proper way to add absolute path support – Eisenberg

Is this issue still unresolved? I am also running into this issue with NX – Animated

issue still exists, any solution ? – Gudrin