相对导入路径报错 • Mintnoii

相对导入路径在 EcmaScript 导入中需要显式文件扩展名#

The Error#

当“—moduleResolution”为“node16”或“nodenext”时，相对导入路径需要在 EcmaScript 导入中显式文件扩展名。

// Relative import paths need explicit file extensions in
// EcmaScript imports when '--moduleResolution' is 'node16'
// or 'nodenext'.

import { example } from "./foo";

typescript

不起作用的解决方案

将.ts扩展名添加到导入路径不起作用，并会导致以下错误：

// An import path can only end with a '.ts' extension when
// 'allowImportingTsExtensions' is enabled.

import { example } from "./foo.ts";

typescript

当启用“allowImportingTsExtensions”时，导入路径只能以“.ts”扩展名结尾。

解决方案

将.js扩展名添加到导入路径 import { example } from "./foo.js";

为什么需要使用 JS 文件拓展名？#

发生此错误是因为您指定了moduleResolution: NodeNext 。这告诉 TypeScript 您希望导入和导出严格符合 Node 规范。 Node 规范要求您对所有导入和导出使用.js文件扩展名。这样做是为了让像./foo.js这样的相对导入路径在Node 和浏览器中都能工作。这也简化了 Node 的模块解析策略 - Node 不必进行任何猜测来确定要导入的文件。

如果我不想使用 JS 文件扩展名怎么办？

确保您使用外部编译器（例如 esbuild）来编译 TypeScript 代码。
更改 tsconfig.json 以使用 moduleResolution: Bundler 而不是moduleResolution: NodeNext 。