2022-06-15

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

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?



No comments:

Post a Comment