How to configure module aliases in a monorepo bootstrapped with Turborepo?

Question

I am attempting to migrate several repositories to the monorepo architecture and I am currently working on a POC bootstrapped with Turborepo.

The issue I am seeing is that ts module aliasing isn't configured properly. I currently have a single ui package and I am trying to export a button component from the index.tsx like so (notice, VS code not complaining, it thinks it can resolve the module):

However, when I attempt to build my application I see that the module is not in fact resolved:

Module not found: Can't resolve '@/components/Button'

I am at a loss here, does anyone know how to properly configure module aliases with turbo repo? Below is the tsconfig.json:

{
  "extends": "tsconfig/react-library.json",
  "include": ["."],
  "exclude": ["dist", "build", "node_modules"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["./components/*"]
    }
  }
}

Answer 1

You need to setup the tsconfig.json inside both packages/ui and root.

1. Inside the packages/ui you have to set like the paths like this;

// root/packages/ui -> tsconfig.json
{
  "extends": "tsconfig/react-library.json",
  "include": ["."],
  "exclude": ["dist", "build", "node_modules"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"] // Don't use "./components/*", instead like this: "components/*" 
    }
  }
}

2. tsconfig.json in root also.

// root -> tsconfig.json
{
  "extends": "your_default_extends",
  "compilerOptions": {
    "plugins": [{your_plugins}],
    "paths": {
      "@*": ["./packages/ui/*"]
    }
  },
  "include": ["your_include"],
  "exclude": ["node_modules"]
}

If you have another project wanna using import @ alias as well, just add the route to the folder inside root tsconfig.json too.

// root -> tsconfig.json
{
  "extends": "your_default_extends",
  "compilerOptions": {
    "plugins": [{your_plugins}],
    "paths": {
      "@*": ["./packages/ui/*", "./apps/some_project/src/*"] // here
    }
  },
  "include": ["your_include"],
  "exclude": ["node_modules"]
}