迹忆客 专注技术分享

当我们尝试使用默认导入从文件中导入值或函数时，会出现错误“The requested module does not provide an export named 'default'”，但未使用默认导出从文件中导出该值。

下面是错误发生方式的示例。 这是我们的 index.js 文件：

index.js

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

下面是一个从 index.js 导入函数的文件。

another-file.js

// ⛔️ The requested module './index.js' does not provide
// an export named 'default'
import sum from './index.js';

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

上面的示例会出现我们本文中介绍的错误

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

要解决错误“Requested module does not provide export named 'default'”，请在从文件中导出值时使用 default 关键字，并且不要将相应的导入包含在花括号中。 每个文件只能有一个 defalut 导出。

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

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

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

console.log(sum(10, 10)); // 👉️ 20

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

每个文件只能有 1 个默认导出。

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

const str = 'hello';

// ✅ Works
export default str;

以下是使用命名导入/导出的方法。

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

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

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

console.log(sum(10, 10)); // 👉️ 20

导入用花括号{}括起来。 这就是我们导入命名导出的方式。

我们必须与自己的 import 和 export 保持一致。 导入 default 导出时不要使用大括号，导入命名导出时不要使用大括号。

我们也可以混搭，这里有一个例子。

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

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

这是 import 的。

another-file.js

// 👇️ default 和 named 导入
import sum, {num} from './index.js';

console.log(sum(10, 10)); // 👉️ 20
console.log(num); // 👉️ 33

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

要解决“Requested module does not provide export named 'default'”错误，请与我们的 ES6 导入和导出保持一致。 如果将值作为default 导出来导出，则必须将其作为 default 导入来导入，如果将其作为命名导出来导出，则必须将其作为命名导入进行导入。