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

[iantanwx]

@singh-jay you also need to ensure that the extensions are appropriately specified.

  "imports": {
    "#*": "./src/*",
    "#icons": "./src/icons.tsx",
    "#lib/*": "./src/lib/*.ts",
    "#atoms/*": "./src/atoms/*.tsx",
    "#styles/*": "./src/styles/*.css"
  }

this is what my package.json looks like. hope that helps.

[braden-w]

Just a quick summary for all who may have stumbled into the above:

A modern monorepo-friendly alternative to Typescript path aliases is Node.js subpath imports, as recommended in this GitHub issue and the official Turborepo docs. Usage is almost identical to a Typescript path alias, except that they are defined in your package.json and must start with a # (this is a strict requirement by Node.js to ensure these imports are clearly distinguished from external package specifiers)

{
  "imports": {
    "#*": "./src/*.ts",
    "#db/schema": "./src/db/schema/index.ts"
  },
}

Adjust all of your imports accordingly:

// Old style with relative paths
import type { Filter } from "../../conditions"
import { pagesTable } from "../db/schema";

// New style with subpath imports
import { Filter } from "#conditions";
import { pagesTable } from "#db/schema";

[karatashsyn]

@singh-jay you also need to ensure that the extensions are appropriately specified.

  "imports": {
    "#*": "./src/*",
    "#icons": "./src/icons.tsx",
    "#lib/*": "./src/lib/*.ts",
    "#atoms/*": "./src/atoms/*.tsx",
    "#styles/*": "./src/styles/*.css"
  }

this is what my package.json looks like. hope that helps.

What if we have different types of files under a folder

[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.