Extend a "paths" tsconfig file for a monorepo

Question

I've got a folder structure like so:

- mono-repo
  tsconfig.paths.json
  - Website
   tsconfig.json
   - src
     test.ts
     index.ts
  - Tool
   - src
    index.ts

// mono-repo/tsconfig.paths.json
{
  "compilerOptions": {
    "paths": {
      "tool": ["Tool/src"],
    }
  }
}

// mono-repo/Website/src/index.ts
import { test } from "test";
import { tool } from "tool";

test(tool);

I'd like to be able to extend tsconfig.paths.json so that every package has correctly typed module imports for the others.

---

Failed Attempt 1

// mono-repo/Website/tsconfig.json
{
  "extends": "../tsconfig.paths.json",
  "compilerOptions": {
    "baseUrl": "./src",
  }
}

Issue: can not find module "tool". The baseUrl added to the path leads to mono-repo/Website/src/Tool/src. This is not a real path.

---

Failed Attempt 2

// mono-repo/Website/tsconfig.json
{
  "extends": "../tsconfig.paths.json",
  "compilerOptions": {
    "baseUrl": "../",
  }
}

Issue: can not import test from "test". The baseUrl is not the project src. Anything but relative paths will be unexportable.

---

Functional but Ugly Attempt 3

// mono-repo/tsconfig.paths.json
{
  "compilerOptions": {
    "paths": {
      "tool": ["../../Tool/src"],
    }
  }
}

// mono-repo/Website/tsconfig.json
{
  "extends": "../tsconfig.paths.json",
  "compilerOptions": {
    "baseUrl": "./src",
  }
}

Issue: works, but makes the assumption that the baseUrl of every tsconfig which extends tsconfig.paths.json will always be two directories below mono-repo. This is currently true for my project, but I'm hesitant to make this a standard.

---

How does one set up an extendable "paths" tsconfig json for a monorepo?

Smithson

You should use Project References. See the second half of this answer, under "this is great for monorepos" – Rubenrubens

Answer 1

Something to know is that tsconfig extends is an override and not a merge. With that information, you can understand that what you are trying to achieve by extending the base tsconfig can't work as you expecting it to do.

Also, using the paths options should always work as a pair with the baseUrl in order to solve the resolution problem.

Nonetheless, here is a solution that you can use to solve that problem.

create a tsconfig.json at the root level of your project alongs the line of:

"paths": {
  "~/*": ["../../../mono-repo/*/src"]
}

Which means in each sub packages, you can extends that tsconfig file and then specify your src directory as a baseUrl. Then you will be able to import as follow:

import { tool } from "~/Tool";

Hope that it is clear, let me know if something is missing =)

Housewarming

It's not working for me. Typescript still raises the issue of "Cannot find module or its corresponding type declarations." – Farceur

Answer 2

Depending if you're using TypeScript 5.5.3, with attempt #3, you can use ${configDir} template to expand from configDir instead of baseUrl

// mono-repo/tsconfig.paths.json
{
  "compilerOptions": {
    "paths": {
      "tool": ["${configDir}/../Tool/src"],
    }
  }
}

Reference: https://github.com/microsoft/TypeScript/pull/58042

Indefinable

Nice. Here's more docs for it: typescriptlang.org/docs/handbook/release-notes/… – Valenta

Answer 3

If I understand correctly it is about create-react-app. If so then you need multiple folder like src in the repo root directory. This require configure webpack so to avoid eject use rewire and use alias for multiple top level directory:

// config-overrides.js:

const {alias, configPaths} = require('react-app-rewire-alias')

module.exports = function override(config) {
  alias(configPaths())(config)
  return config
}

Knit