在 TypeScript 中使用绝对导入时的 ts-node \'MODULE_NOT_FOUND\'答案

【问题标题】：ts-node 'MODULE_NOT_FOUND' when using absolute imports in TypeScript在 TypeScript 中使用绝对导入时的 ts-node \'MODULE_NOT_FOUND\'
【发布时间】：2023-01-28 22:45:29
【问题描述】：

我偶然发现了绝对导入的问题。存储库在此处公开可用：https://github.com/repetitioestmaterstudiorum/ts-boiler

当我尝试导入具有绝对路径（相对于项目目录）的文件，然后执行 npm run dev 或 npm run ts-node src/index.ts 时，出现以下错误：

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' ]
}

（出于隐私原因，我的用户名和文件夹结构被混淆了）

相对导入，例如文件 src/index.ts 中的 import { C } from './constants' 工作正常。当使用相应的 tsconfig.json 设置将其更改为 import { C } from '/src/constants' 或 import { C } from 'src/constants' 时，出现错误。（当我将 .js 或 .ts 附加到导入时，也会发生同样的错误）

tsconfig.json 启用前导破折号的绝对导入设置：

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

我通常使用 MeteorJS，最近学习了 Remix 教程（以了解框架）。这两个框架都鼓励绝对导入，我将它们的两个 tsconfig.json 文件都复制到我的项目中（在 Remix 的设置中添加 ~）以尝试查看它们的配置是否适合我 - 但没有成功！

我还查看了如何启用绝对导入：https://javascript.plainenglish.io/why-and-how-to-use-absolute-imports-in-react-d5b52f24d53c 导致了同样的错误。

更让我困惑的是，配置了 ESLint 的 VSCode 不会抱怨在 tsconfig.json 文件中使用正确设置的绝对导入。

奇怪的是，有一个使用绝对路径的导入在具有相同设置的项目中运行良好：import type { Constants } from '/types/t.constants'。它也可以在没有“类型”的情况下工作，例如import { Constants } from '/types/t.constants'。可能是因为导入的文件不在“src/”中，而是在“types/”中？

也许有人曾经解决过类似的问题？

【问题讨论】：

标签： typescript importerror tsconfig absolute-path

【解决方案1】：

经过更多研究，我在这里找到了答案：https://medium.com/@fmoessle/typescript-paths-with-ts-node-ts-node-dev-and-jest-671deacf6428

我的情况需要的是npm i -D tsconfig-paths，然后将以下内容添加到我的 tsconfig.json 中：

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

为了使来自 src/ 目录的绝对导入在 JEST 测试中也能正常工作，我需要将以下内容添加到 jest.config.ts：

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

【讨论】：

【解决方案2】：

关注这篇文章：https://reacthustle.com/blog/how-to-configure-typescript-baseurl-in-nodejs 它用更少的配置解决了这个问题。

【讨论】：