只能使用 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.jsonesModuleInterop文件中将选项设置为。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

这会导致一些问题和设置esModuleInterop来true修复这些问题。

该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模块不提供默认导出，因此如果我们尝试将其设置为 导入allowSyntheticDefaultImports，false则会出现错误。

索引.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 中的另一个文件导入值的详细指南。

额外资源

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