在TypeScript中使用绝对导入时的ts节点“MODULE_NOT_FOUND”

dkqlctbz  于 2023-01-31  发布在  TypeScript
关注(0)|答案(1)|浏览(347)

我偶然发现了一个绝对导入的问题。存储库可以在这里公开获得:https://github.com/repetitioestmaterstudiorum/ts-boiler
当我尝试导入一个带有绝对路径(相对于项目目录)的文件,然后执行npm run devnpm 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' ]
}

(my出于隐私原因,用户名和文件夹结构被混淆)
相对导入,例如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'。它也可以在没有“type”的情况下工作,例如import { Constants } from '/types/t.constants'。可能是因为导入的文件不在“src/”中,而是在“types/"中?
也许有人曾经解决过类似的问题?

gdx19jrr

gdx19jrr1#

经过更多的研究,我发现我的答案在这里: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"]
}

更多信息:https://github.com/TypeStrong/ts-node#paths-and-baseurl
为了使从src/目录的绝对导入也能在JEST测试中工作,我需要向jest.config.ts添加以下代码:

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

相关问题