请求的模块不提供在 JS 中命名的导出

请求的模块没有提供在 JS 中命名的导出

The requested module does not provide an export named in JS

“Uncaught SyntaxError: The requested module does not provide an export named”发生在混淆默认和命名的 ES6 模块导入和导出时。

要解决该错误，请确保在不使用大括号的情况下导入默认导出，并使用大括号导入命名导出。

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

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

这是一个从index.js.

// ⛔️ should not use curly braces
import {sum} from './index.js';

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

请注意，在我们的index.js文件中，我们使用了
默认导出，但是当我们在其他文件中导入函数时，我们使用了named导入。这就是发生错误的原因。

使用默认的导出和导入

您可以

通过以下方式将默认导入/导出与 ES6 模块一起使用。

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

并使用默认导入导入函数。

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

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

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

使用命名导出和导入

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

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

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

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

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

请注意，我们使用了花括号，这就是我们导入导出的方式named。

使用默认的和命名的导出和导入

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

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

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

这是进口商品。

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

console.log(sum(10, 15)); // 👉️ 25
console.log(num); // 👉️ 100

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

确保您从中导入的文件导出值

错误的另一个常见原因是试图从不导出函数、变量或类的文件中导入函数、变量或类。

确保：

• 导入语句中文件的路径是正确的
• 你没有混淆命名和默认的导出和导入
• 您在导入语句中指定了文件的扩展名
• 您没有拼错要导入的变量或函数的名称
• 每个文件只能default导出 1 个，但可以
  named根据需要导出任意多个

结论

解决报错“The requested module does not provide an export named”，与你的ES6 imports和exports保持一致。

如果一个值作为默认导出导出，则它必须作为默认导入导入，如果它作为命名导出导出，则必须作为命名导入导入。

额外资源

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

• 导入和导出类和函数
• 从 JavaScript 或 TypeScript 中的文件导入所有导出