5

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"
    }
  ]
}
efdali
  • 51
  • 3
  • Add the correct path rule (e.g. `"@components/shop/*": ["libs/shop/src/lib/*"],`) to the `tsconfig.base.json` `paths` object. – daan.desmedt Jan 28 '22 at 15:17
  • 1
    yes, it works. but eslint gives an error in this case, I want to find the correct way that eslint won't give error – efdali Jan 29 '22 at 19:39
  • what error do you get? – daan.desmedt Jan 30 '22 at 20:32
  • 1
    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 – efdali Jan 31 '22 at 06:18

0 Answers0