How to set paths property in a project with multiple tsconfig.json?

Question

I have the following file structure

|__ app1/
|   |__ tsconfig.json
|__ utilities/
|   |__ files.ts
|__ base-tsconfig.json

In base-tsconfig.json I have set the paths property as following

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

and in tsconfig.json it looks as follow

{
    "extends": "../base-tsconfig",
}

That should be enough right? I am still getting below message though.

Cannot find module 'utils'

If you have any other paths in your inner tsconfig they will completely clobber the extended tsconfig, see https://github.com/Microsoft/TypeScript/issues/14527 (this is annoying as it breaks DRY) — 6EQUJ5, Jan 14 '19 at 11:51

mPrinC · Answer 1 · 2022-10-19T10:35:47.933

The problem is that paths resolution you've provided (utils/*) cannot resolve

import utils from `utils`

you should use

"paths": {
            "utils": ["utilities"]
        }

or if you need also scoped entries or sub-entries, like this:

// direct import from the `index.ts` barrel
// covered with `"utils": ["utilities"],`
import utils from `utils`

// import from a scoped entry (sub-entry):
// covered with `"utils/*": ["utilities/*"]`
// it will import it from `utilities/special.ts`
import utilsSpecial from `utils/special`
// or, it will import just `utilsSpecialAdd` exported symbol from the same `utilities/special.ts`
import { utilsSpecialAdd } from `utils/special`

you should cover both cases:

"paths": {
            "utils": ["utilities"],
            "utils/*": ["utilities/*"]
        }

Could you give an example of a scoped entry or sub-entry? – Paul Razvan Berg Oct 16 '22 at 21:21 — Paul Razvan Berg, Oct 16 '22 at 21:21
Hi @PaulRazvanBerg, I added, I hope it is clear now – mPrinC Oct 19 '22 at 10:36 — mPrinC, Oct 19 '22 at 10:36

score 1 · Answer 2 · answered Feb 21 '20 at 10:10

The "paths" option can be used to inform the compiler of mappings but it does not perform these path transformations by itself. You can read more about this in the docs and in this issue. Most likely you are using a loader which does not allow remapping, such as Node.js's require().

There are packages available to help resolve this problem such as module-alias and tsconfig-paths.

score 0 · Answer 3 · answered Mar 27 '22 at 00:36

The paths property should be set in the individual packages' tsconfig.json instead of base-tsconfig.json

// app1/tsconfig.json
{
  "extends": "../base-tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "utils/*": ["./utilities/*"]
    }
  }
}

How to set paths property in a project with multiple tsconfig.json?

3 Answers3

Linked