Setting the paths property in a project with multiple tsconfig.json files: a step-by-step guide

Question

Setting the paths property in a project with multiple tsconfig.json files: a step-by-step guide

My file structure is organized as follows:

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

I have defined the paths property in base-tsconfig.json like this:

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

In tsconfig.json, it looks like this:

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

Despite these configurations, I am still encountering the error message below:

Cannot find module 'utils'

typescript tsconfig

Answer 1

Answer №1

The issue lies in the resolution of the paths you specified as utils/*, which is unable to resolve.

import utils from `utils`

To fix this, you should use:

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

If you also require scoped entries or sub-entries, consider the following:

// Import directly from the `index.ts` barrel
// included in `"utils": ["utilities"],`
import utils from `utils`

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

For comprehensive coverage, make sure to address both scenarios:

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

Answer 2

The issue lies in the resolution of the paths you specified as utils/*, which is unable to resolve.

import utils from `utils`

To fix this, you should use:

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

If you also require scoped entries or sub-entries, consider the following:

// Import directly from the `index.ts` barrel
// included in `"utils": ["utilities"],`
import utils from `utils`

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

For comprehensive coverage, make sure to address both scenarios:

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

Answer 3

Answer №2

To instruct the compiler about mappings, the "paths" option is utilized, although it does not execute these transformations on its own. Further details can be found in the documentation and this thread. If you encounter issues with path remapping, it may be due to using a loader like Node.js's require().

There are solutions available to address this dilemma, such as module-alias and tsconfig-paths.

Answer 4

To instruct the compiler about mappings, the "paths" option is utilized, although it does not execute these transformations on its own. Further details can be found in the documentation and this thread. If you encounter issues with path remapping, it may be due to using a loader like Node.js's require().

There are solutions available to address this dilemma, such as module-alias and tsconfig-paths.

Answer 5

Answer №3

In order to properly configure the paths property, it is recommended to define it within each package's specific tsconfig.json file rather than in a shared base-tsconfig.json.

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

Answer 6

In order to properly configure the paths property, it is recommended to define it within each package's specific tsconfig.json file rather than in a shared base-tsconfig.json.

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

Setting the paths property in a project with multiple tsconfig.json files: a step-by-step guide

Answer №1

Answer №2

Answer №3

Similar questions

Angular 5 - Reverting back to the previous state

Using TypeScript to wrap a class with a Proxy object

Angular: Enable function to await Observable completion before returning result

What is the best way to send my Array containing Objects to the reducer using dispatch in redux?

React/Typescript: The object might be null

eliminate the common elements between two arrays in typescript/javascript

Unexpected token in catch clause in React Native TypeScript

The TypeScript fs/promises API is experiencing compilation issues when used in JavaScript

Exploring TypeScript's type checking functionality

Error: Failed to load chunk 552 due to chunk loading issue

Typescript -> In a React Native project, the type of 'value' is classified as 'unknown'

Understanding the limitations of function overloading in Typescript

Efficiently transforming a nested object array into a single dynamic array

Angular: failure to update a specific portion of the view

Parsing the header parameter in a GET request from Angular within the Spring backend

Deployment of a NextJS14 app to Vercel encountered an issue: Unexpected token '<' found in JSON at position 0

I am in need of assistance with incorporating a particular hibernate Inheritance mapping into my project

What sets apart the various download options for Typescript, such as npm, NuGet, and Marketplace?

Is it possible for a conditional type in TypeScript to be based on its own value?

Bringing in the Ionic ToastController to a TypeScript class