How to use path aliases within a packages directory?

[himantyu-yuma]

I am currently developing an application using turborepo and Remix, and I would like to use path aliases within the packages directory.
For example, if I have following directory:

.
└── packages/
    └── ui/
        ├── Button/
        │   └── button.tsx
        └── Dialog/
            └── dialog.tsx

I want to import Button in Dialog using this syntax: import { Button } from "@/Button".

I tried setting up the packages/ui/tsconfig.json file like this:

{ 
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["./*"], 
    },
  }
} 

But I got errors and the path didn't resolve.

I read this Discussion( #620 ), but I want to use @ as root of package.

If anyone knows how to set up path aliases in a monorepo setup using turborepo for importing packages.
Also, please let me know if this isn't a common practice when using monorepo setup or if there are better approaches. I'm not very familiar with monorepos.

[anthonyshew]

This is a perfectly fine practice! But it does have another layer of configuration to make work. 😄

• Subpath imports tell Node.js compilers where to look.
• paths in tsconfig tell TypeScript where to look.

What you end up with is a mismatch between what your compiler sees and what you see in your editor.

So, to use subpath imports, you'll need to follow the rules of Node.js (since they're more strict than TypeScript here.

In packages/ui/package.json:

  "imports": {
    "#*": "./src/*"
  },

And in packages/ui/tsconfig.json:

  "compilerOptions": {
    "paths": {
      "#/*": ["./src/*"]
    }
  },

Now, everyone speaks the same importing language and you can build successfully. 🥳

[singh-jay]

I have changed the imports and paths as suggested by @anthonyshew, still getting the module not-found error.
Module not found: Request should not start with "#/"
1 | import { InputHTMLAttributes } from "react";

2 | import { BaseInput } from "#/primitive/base-input";

I tried different approaches based on the different threads but couldn't get it working.

Here is a demo repo - https://github.com/singh-jay/turbo-path-alias

Please share any reference repo, if anyone has a working solution.

[anthonyshew]

TypeScript now has automatic support for package.json#paths so you can get rid of the configuration in the tsconfig.json.

Note: You won't be able to use #/*. You'll need to use #* instead.

https://devblogs.microsoft.com/typescript/announcing-typescript-5-4/#auto-import-support-for-subpath-imports

[drithh]

I fixed it, my typescript version 5.4.5

here's what i change

packages/ui/package.json

"imports": {
    "#dep/*": [
      "./src/*.ts",
      "./src/*.tsx"
    ]
 },

and for packages/ui/tsconfig.json

{
  "extends": "@repo/typescript-config/react-library.json",
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": "."
  },
  "exclude": ["node_modules", "dist"]
}

and this is how i import the component

import { cn } from '#dep/lib/utils';

[ozhanefemeral]

Hey, thanks a lot! This is working, but I couldn't get auto-complete for these paths and had to write them manually.