模块在 TypeScript 中没有默认导出错误

当我们尝试从没有默认导出的模块中导入默认时，会出现“模块没有默认导出”错误。要解决该错误，请确保模块具有命名导出并将导入用大括号括起来，例如import {myFunction} from './myModule'.

模块没有默认导出错误

下面是错误如何发生的示例。这是我们的index.ts文件。

索引.ts


// 👇️ named export
export function sum(a: number, b: number) {
  return a + b;
}

这是一个从index.ts.

另一个文件.ts


// ⛔️ Error: Module '"X"' has no default export.
// 👇️ default import
import sum from './index';

console.log(sum(5, 15));

请注意，在我们的index.ts文件中，我们使用了命名导出，但是当我们在另一个文件中导入函数时，我们使用了默认导入。这就是发生错误的原因。

要解决错误“模块没有默认导出”，请确保：

以下是如何使用默认导出解决错误的示例。

索引.ts


// 👇️ default export
export default function sum(a: number, b: number) {
  return a + b;
}

并在另一个文件中导入函数。

另一个文件.ts


// 👇️ default import
import sum from './index';

console.log(sum(5, 15));

请注意，我们在使用默认导入时不使用花括号。

每个文件最多可以有 1 个默认导出。

如果要将变量导出为默认导出，则必须在第一行声明它并在下一行导出它。您不能在同一行上声明和默认导出变量。

索引.ts


const str = 'hello';

export default str;

每个模块只能有一个默认导出，但可以有多个命名导出。

以下是您如何使用命名导入/导出。

索引.ts


// 👇️ named export
export function sum(a: number, b: number) {
  return a + b;
}

现在我们在另一个文件中使用命名导入。

索引.ts


// 👇️ named import
import { sum } from './index';

console.log(sum(5, 15));

注意花括号，这是我们导入命名导出的方式。

您必须与您的进出口保持一致。导入默认导出时不要使用大括号，导入命名导出时不要使用大括号。

您也可以混合搭配，这里是一个例子。

索引.ts


// 👇️ named export
export const num = 33;

// 👇️ default export
export default function sum(a: number, b: number) {
  return a + b;
}

这是进口商品。

索引.ts


// 👇️ default and named import
import sum, { num } from './index';

console.log(sum(num, 10));

我们使用默认导入来导入sum函数，使用命名导入来导入num变量。

结论#

要解决“Module has no default export”的错误，请与您的 ES6 导入和导出保持一致。如果一个值作为默认导出导出，则它必须作为默认导入导入，如果它作为命名导出导出，则必须作为命名导入导入。