迹忆客 专注技术分享

当我们尝试导入指定文件中不存在的命名导入时，会发生 React.js “Attempted import error 'X' is not exported from”的错误。 要解决该错误，请确保模块具有命名导出，并且您没有混淆命名导出和默认导出和导入。

这是错误发生方式的示例。 这是一个导出函数的文件。

// 注意: default export
export default function sum(a, b) {
  return a + b;
}

这是我们导入函数的 index.js 文件。

// Attempted import error: 'sum' is not exported from './another-file'.
// 注意: 使用 name 导入
import {sum} from './another-file';

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

请注意，在 another-file.js 中我们使用了 default export，而在 index.js 文件中我们使用了命名导入。 这就是发生错误的原因。

要解决错误“Attempted import error 'X' is not export from”，请确保：

1. 在导入 name 导出时将它们包裹在花括号中
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 关键字，而是将命名导入包含在花括号中。

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

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

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

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

// default 导入
import sum from './another-file';

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

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

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

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

// 默认导出
const example = 'hello world';

export default example;

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

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

// 命名导出
export const num = 15;

下面是多个导入。

// 默认和命名导入
import sum, {num} from './another-file';

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

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

要解决“Attempted import error 'X' is not exported from ”错误，请与 ES6 导入和导出保持一致。 如果将值作为默认导出来进行导出，则必须将其作为默认导入来进行导入，如果将其作为命名导出而导出的话，则必须将其作为命名导入而导入。