How to use path alias in packages?

[depsimon]

I want to setup path aliases in packages (import from ~/...) to replace relative imports with aliased imports.

Heer's my configs:

// packages/ui/package.json
{
  "name": "@workspace/ui",
  "type": "module",
  "exports": {
    "./*": "./src/*"
  },
  ...
}

// packages/ui/tsconfig.json
{
  ...,
  "compilerOptions": {
    ...
    "paths": {
      "~/*": [
        "./src/*"
      ],
    },
  }
}

Inside the ui lib package, everything seems fine, no errors whatsoever. But as soon as I import a UI component in my Remix app, I'm getting TS errors:

../../packages/ui/src/components/Button/index.tsx:2:22 - error TS2307: Cannot find module '~/components/Slot' or its corresponding type declarations.

2 import { Slot } from "~/components/Slot";

In my case, Button imports Slot from ~/components/Slot.
If I import from "../Slot"; all is fine again as it doesn't use alias anymore.

Also components that don't import other components or utils don't throw the error.

I am not using tsup.

Am I missing something obvious? Or is this not supported at all? It's probably not a limitation on Remix side, but rather on TS/monorepo.

[PhilDL]

Hello, ideally it would be great if you could provide a repository so I could check all the tsconfigs and the package.json.

But if I understood correctly this is because the path ~/ from the remix-app doesn't understand that it should check inside the UI package. A solution would be to define multiple entry to same alias in the Remix app tsconfig:

"paths": {
  "~/*": [
    "./app/*",
    "../../packages/ui/src/*"
  ],
}

This setup is actually allowed and have correct autocomplete from VSCode.

[depsimon]

Sorry I realize the initial issue is not really descriptive.

I set up a codesandbox with a reproduction.

https://codesandbox.io/p/devbox/funny-night-ns5sww?file=%2Fapps%2Fweb%2Ftsconfig.json%3A17%2C15

The issue occurs when I run the tsc command to typecheck my Remix app.

➜  web git:(master) bun run typecheck 
$ tsc
../../packages/ui/src/components/Button/index.tsx:2:22 - error TS2307: Cannot find module '~/components/Slot' or its corresponding type declarations.

2 import { Slot } from "~/components/Slot";
                       ~~~~~~~~~~~~~~~~~~~


Found 1 error in ../../packages/ui/src/components/Button/index.tsx:2

The Remix app knows @monorepo/ui/* points to ./packages/ui/src/* but from that point it doesn't recognize the local ~/* alias inside the ui package.

[PhilDL]

Thank you for the repro, the solution my solution is still the same as describe above:

Update the apps/web/tsconfig.json paths:

    "paths": {
      "~/*": ["./app/*", "../../packages/ui/src/*"],
      "@monorepo/ui/*": ["../../packages/ui/src/*"]
    },

Without "../../packages/ui/src/*" in the ~/* your alias in UI package won't work.

I personally find this setup confusing when same aliases are merging, and would advise you, if alias are really important to you, to maybe create a root tsconfig file and write your paths there, the other packages/apps then extend that root tsconfig.

[depsimon]

Thanks, it definitely does the trick but feels confusing. I'm wondering what happens if two packages/apps share the same files (which will definitely happen)..

Curious about the root tsconfig file solution.

With that solution do you setup "global" aliases like @monorepo/web, @monorepo/ui and use them even in their own directory?

// packages/ui/src/components/Button/index.tsx
import { Slot } from "@monorepo/ui/components/Slot";

[PhilDL]

Yes exactly, unfortunately it may also seems awkward to use 🤷‍♂️. I first saw that technique in that monorepo example https://github.com/NiGhTTraX/ts-monorepo which use a bunch of cool monorepo techniques.