只能使用 esModuleInterop 标志默认导入模块

模块只能使用 esModuleInterop 标志默认导入

Module can only be default-imported using esModuleInterop flag

当我们尝试将 CommonJS 模块导入 ES6 模块时,出现错误“Module can only be default-imported using esModuleInterop flag”。

要解决该错误,请在您的
文件中将
esModuleInterop选项设置为truetsconfig.json

模块只能默认导入

下面是错误如何发生的示例。

索引.ts
// ⛔️ Error: Module '"path"' can only be // default-imported using the 'esModuleInterop' flag ts(1259) // This module is declared with using 'export =', and // can only be used with a default import when // using the 'esModuleInterop' flag. import path from 'path'; console.log(path.join(__dirname, './another-file.ts')); export const num = 42;

问题是这是一个使用and
语法的
pathCommonJS 模块,我们正在尝试

使用默认导入将其导入
ES6 模块。
exportsrequire

esModuleInterop选项设置为true

要解决该错误,请
tsconfig.json
esModuleInterop文件中将选项设置为true

tsconfig.json文件
{ "compilerOptions": { "esModuleInterop": true, "allowSyntheticDefaultImports": true, // ... rest } }

现在我们的导入工作正常。

索引.ts
import path from 'path'; export const num = 42; // ✅ "/home/borislav/Desktop/typescript/src/another-file.ts" console.log(path.join(__dirname, './another-file.ts'));
如果这不能解决问题,请尝试重新启动 IDE 和开发服务器。

esModuleInterop选项默认
设置为,这导致它像对待 ES6 模块一样对待 CommonJS
模块。false

这会导致一些问题和设置esModuleInteroptrue修复这些问题。

esModuleInterop设置通过两个辅助函数更改了编译器的行为,这两个辅助函数提供了一个垫片以使发出的 JavaScript 兼容。

当您设置esModuleInterop为时true,您还启用了
allowSyntheticDefaultImports
选项。

启用后,当模块未明确指定默认导出时,allowSyntheticDefaultImports允许我们在不使用星号的情况下编写导入。*

索引.ts
import React from 'react'; import path from 'path'; import fs from 'fs';

代替:

索引.ts
import * as React from 'react'; import * as path from 'path'; import * as fs from 'fs';

例如,该path模块不提供默认导出,因此如果我们尝试将其设置为 导入allowSyntheticDefaultImportsfalse则会出现错误。

索引.ts
// ⛔️ Error: Module '"path"' can only be // default-imported using the 'esModuleInterop' flag ts(1259) import path from 'path';

错误的原因是没有default我们可以从模块中导入的对象。

如果这不能为您解决问题,请尝试重新启动 IDE 和服务器。

使用import * as X语法

另一种方法是使用import * as x语法。

索引.ts
import * as path from 'path'; export const num = 42; // ✅ "/home/borislav/Desktop/typescript/src/another-file.ts" console.log(path.join(__dirname, './another-file.ts'));

请注意,诸如此类的导入import * as x仅考虑拥有的属性(不是通过原型链继承的)。

如果导入使用继承属性的模块,则必须使用默认导入语法 – import path from 'path'.

我还写了一篇关于
如何从 TS 中的另一个文件导入值的详细指南。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息: