在TypeScript中使用绝对导入时出现“MODULE_NOT_FOUND”的错误

18

我在使用绝对导入时遇到了一个问题。该存储库可以在此处公开访问: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' ]
}

出于隐私原因,我的用户名和文件夹结构已被混淆。

相对导入,例如在文件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/”中?

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

1个回答

33

经过更多的研究,我在这里找到了答案: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

为了使在JEST测试中可以从src/目录进行绝对导入,我需要将以下内容添加到jest.config.ts

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

谢谢!这对我在一个使用工作区包的项目上起了作用。值得一提的是,我不得不将设置复制到根包中,以使VSCode Jest插件正常工作。 - undefined

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接