TypeScript is unable to locate the module using a non-relative path of 'src/xxx'

Question

TypeScript is unable to locate the module using a non-relative path of 'src/xxx'

I am facing an issue with resolving non-relative modules in TypeScript. I have tried using baseUrl, paths, and other methods, but none seem to work...

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": ".",
    "esModuleInterop": true,
    "module": "commonjs",
    "sourceMap": true,
    "strict": true,
    "target": "esnext",
    "typeRoots": ["node_modules/@types"]
 }
}

Directory structure of the project:

root
  ├─src
    ├── APIs
    ├── config
    ├── constants
    ├── middlewares
    ├── models
    ├── routes
    ├── services
          - foo.ts   
    ├── utils
    └── app.ts

In app.ts

import foo from 'src/services/foo'

When running with ts-node src/app.ts, I encounter the following error:

Cannot find module 'src/services/foo'

typescript ts-node

Answer 1

Answer №1

At last, I included the paths option to resolve the issue.

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "esModuleInterop": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "removeComments": true,
    "sourceMap": true,
    "target": "esnext",
    "strict": true,
    "noUnusedLocals": true,
    "paths": {
      "@/*": ["src/*"]
    },
    "typeRoots": ["./src/@types", "./node_modules/@types"]
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/node_modules/*", "**/*.spec.ts"]
}

In app.ts:

import foo from '@/services/foo'

Answer 2

At last, I included the paths option to resolve the issue.

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "esModuleInterop": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "removeComments": true,
    "sourceMap": true,
    "target": "esnext",
    "strict": true,
    "noUnusedLocals": true,
    "paths": {
      "@/*": ["src/*"]
    },
    "typeRoots": ["./src/@types", "./node_modules/@types"]
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/node_modules/*", "**/*.spec.ts"]
}

In app.ts:

import foo from '@/services/foo'

Answer 3

Answer №2

To implement path aliases in your project, you will need to include tsconfig-paths and module-alias in your package.json as shown below:

    "_moduleDirectories:" ["src"]

In your app.ts file, add the following line:

    import 'module-alias/register';

Additionally, create a file named tsconfig-path.js in the root directory with the following content:

const tsConfigPaths = require('tsconfig-paths');
const tsConfig = require('./tsconfig.json');
tsConfigPaths.register({
    baseUrl: tsConfig.compilerOptions.outDir,
    paths: tsConfig.compilerOptions.paths,
});

Don't forget to update your tsconfig.json file as follows:

{
    "compilerOptions": {
        "baseUrl": "src",
        "paths": {
            "*":["./*"]
        }
    },
    "exclude": ["node_modules"],
    "include": ["./src/**/*.ts"]
}

Answer 4

To implement path aliases in your project, you will need to include tsconfig-paths and module-alias in your package.json as shown below:

    "_moduleDirectories:" ["src"]

In your app.ts file, add the following line:

    import 'module-alias/register';

Additionally, create a file named tsconfig-path.js in the root directory with the following content:

const tsConfigPaths = require('tsconfig-paths');
const tsConfig = require('./tsconfig.json');
tsConfigPaths.register({
    baseUrl: tsConfig.compilerOptions.outDir,
    paths: tsConfig.compilerOptions.paths,
});

Don't forget to update your tsconfig.json file as follows:

{
    "compilerOptions": {
        "baseUrl": "src",
        "paths": {
            "*":["./*"]
        }
    },
    "exclude": ["node_modules"],
    "include": ["./src/**/*.ts"]
}

Answer 5

Answer №3

To enable path mapping in TypeScript, you must first install the tsconfig-paths package and then include the following code snippet in your tsconfig.json file:

"ts-node": {
    // Don't forget to run `npm i -D tsconfig-paths` after adding this
    "require": ["tsconfig-paths/register"]
  }

More information can be found here: https://github.com/TypeStrong/ts-node#paths-and-baseurl

Answer 6

To enable path mapping in TypeScript, you must first install the tsconfig-paths package and then include the following code snippet in your tsconfig.json file:

"ts-node": {
    // Don't forget to run `npm i -D tsconfig-paths` after adding this
    "require": ["tsconfig-paths/register"]
  }

More information can be found here: https://github.com/TypeStrong/ts-node#paths-and-baseurl

TypeScript is unable to locate the module using a non-relative path of 'src/xxx'

Answer №1

Answer №2

Answer №3

Similar questions

Redirecting with response headers in Next.js

What is the most effective method for creating Typescript type predicates that yield the most specific types when filtering arrays?

Presenting a Dialogue Box Message

A TypeScript interface or class

What is the best approach to repurpose a jest test for various implementations of a shared interface?

Issue with Angular2 - namespace webdriver not detected during npm installation

Examining the array to ensure the object exists before making any updates in the redux

Why isn't tslint:disable working? What could be causing this issue?

Service error: The function of "method" is not valid

Transform the fetch request to utilize oboe for parsing JSON streams in a Typescript environment

When conditionals are used, Typescript struggles to accurately infer the correct type

Having trouble resolving the signature of a class decorator when invoked as an expression with @Injectable in Angular

What is the significance of incorporating 'Actions' as data within the Redux framework?

The type 'string | null' cannot be assigned to the type 'string | undefined'. Specifically, the type 'null' cannot be assigned to the type 'string | undefined'

How to Measure the Length of an Undefined Value in Jasmine Angular Unit Tests

TypeScript raises concerns when a function returns a boolean instead of an object

Angular is failing to detect a change in the initial element of an array

What can TypeScript do with high-level type functions?

TypeScript Error: The Object prototype must be an Object or null, it cannot be undefined

Exploring the inner workings of Angular v4.4 and gaining insight into the roles of platformBrowserDynamic and PlatformRef