ts-node 'MODULE_NOT_FOUND' when using absolute imports in TypeScript

Question

I stumbled upon a problem with absolute imports. The repository is publicly available here: https://github.com/repetitioestmaterstudiorum/ts-boiler

When I'm trying to import a file with absolute path (relative to the project directory) and then execute npm run dev or npm run ts-node src/index.ts I am getting the following error:

Error: Cannot find module '/src/constants'
Require stack:
- /Users/<my-username>/<some-path>/ts-boiler/src/index.ts
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._resolveFilename.sharedData.moduleResolveFilenameHook.installedValue [as _resolveFilename] (/Users/<my-username>/<some-path>/ts-boiler/node_modules/@cspotcode/source-map-support/source-map-support.js:811:30)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/<my-username>/<some-path>/ts-boiler/src/index.ts:1:1)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Module.m._compile (/Users/<my-username>/<some-path>/ts-boiler/node_modules/ts-node/src/index.ts:1597:23)
    at Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Object.require.extensions.<computed> [as .ts] (/Users/<my-username>/<some-path>/ts-boiler/node_modules/ts-node/src/index.ts:1600:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '/Users/<my-username>/<some-path>/ts-boiler/src/index.ts' ]
}

(my username and folder structure is obfuscated for privacy reasons)

Relative imports, such as import { C } from './constants' inside the file src/index.ts work fine. When changing that to import { C } from '/src/constants' or import { C } from 'src/constants' with the corresponding tsconfig.json settings, I'm getting the error. (the same error also occurs when I append .js or .ts to the import)

tsconfig.json settings for absolute imports with leading dash enabled:

"baseUrl": ".",
"paths": {
    /* Support absolute imports with a leading '/' */
    "/*": ["*"]
},

I usually work with MeteorJS and recently followed the tutorial for Remix (to get to know the framework). Both of these frameworks encourage absolute imports and I copied both of their tsconfig.json files into my project (adding ~ in the case of Remix's settings) to try and see if their configuration would work for me - without success!

I also looked at this on how to enable absolute imports: https://javascript.plainenglish.io/why-and-how-to-use-absolute-imports-in-react-d5b52f24d53c which resulted in the same error.

What's more confusing for me is that VSCode with ESLint configured does not complain about the absolute imports with the right settings in the tsconfig.json file.

And weirdly, there is one import that uses an absolute path that works well inside the project with the same settings: import type { Constants } from '/types/t.constants'. It also works without "type", e.g. import { Constants } from '/types/t.constants'. It could be because the imported file is not in "src/" but in "types/"?

Maybe someone solved a similar problem once?

Incandescent

Answer 1

After more research I found my answer here: https://medium.com/@fmoessle/typescript-paths-with-ts-node-ts-node-dev-and-jest-671deacf6428

What was required in my case was npm i -D tsconfig-paths and then adding the following to my tsconfig.json:

"ts-node": {
    "require": ["tsconfig-paths/register"]
}

More about this: https://github.com/TypeStrong/ts-node#paths-and-baseurl

To make absolute imports from the src/ directory work in JEST tests as well, I needed to add the following to jest.config.ts:

moduleNameMapper: {
    '/src/(.*)': '<rootDir>/src/$1',
},

Incandescent

Thank you!!! It did the trick for me on a project with workspace packages. Worth mentioning that I had to replicate the settings to the root package in order to make the VSCode Jest plugin to work. – Catercousin