React 中错误 does not contain a default export 解决

当我们尝试使用 default import 从没有 default export 的模块导入时，会出现“does not contain a default export”错误。 要解决该错误，请确保模块具有命名导出并将导入封装在花括号中，例如 从'./myModule.import {myFunction}

下面是错误发生方式的示例。

// 命名导出
export function sum(a, b) {
  return a + b;
}

我们尝试对命名导出使用默认导入。

// Error: Attempted import error: file does not contain a default export
// 使用默认导入
import sum from './another-file';

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

请注意，在 another-file.js 中，我们使用命名导出来导出 sum 函数，而在 index.js 中，我们使用默认导入。 这就是发生错误的原因。

要解决“does not contain a default export”错误，请确保：

1. 在导入命名导出时将它们包裹在花括号中
2. 将值导出为默认导出时使用 default 关键字
3. 每个模块最多只有 1 个默认导出，但可以有多个命名导出

以下是如何使用命名导入解决错误的示例。

export function sum(a, b) {
  return a + b;
}

并在 index.js 文件中导入函数。

import {sum} from './another-file';

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

注意，我们没有为命名导出使用 default 关键字，而是将命名导入包含在花括号中。

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

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

export default function sum(a, b) {
  return a + b;
}

现在我们在 index.js 文件中使用默认导入。

import sum from './another-file';

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

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

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

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

const example = 'hello';

export default example;

也可以混合使用，这里有一个例子。

export default function sum(a, b) {
  return a + b;
}

export const num = 20;

下面是多个导入

import sum, {num} from './another-file';

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

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

要解决“does not contain a default export”错误，请与 ES6 导入和导出保持一致。 如果将值作为默认导出进行导出，则必须将其作为默认导入来导入，如果将其作为命名导出进行导出，则必须将其作为命名导入来导入。

火焰兔

海报 链接