React 中 Attempted import error ‘X’ is not exported from 错误

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

下面是错误如何发生的示例。 这是一个导出函数的文件。

another-file.js

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

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

ndex.js

// ⛔️ Attempted import error: 'sum' is
// not exported from './another-file'.
// 👇️ Note: using named import
import {sum} from './another-file';

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

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

要解决错误“Attempted import error ‘X’ is not exported from”，请确保：

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

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

another-file.js

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

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

index.js

// 👇️ Using named import
import {sum} from './another-file';

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

请注意 ，我们没有对命名导出使用默认关键字，而是将命名导入用花括号括起来。

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

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

another-file.js

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

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

index.js

// 👇️ default import
import sum from './another-file';

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

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

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

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

index.js

// 👇️ default export
const example = 'hello world';

export default example;

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

another-file.js

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

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

这是导入的代码。

index.js

// 👇️ default and named imports
import sum, {num} from './another-file';

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

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

要解决“Attempted import error ‘X’ is not exported from”错误，请与我们的 ES6 导入和导出保持一致。 如果一个值作为默认导出导出，则它必须作为默认导入导入，如果它作为命名导出导出，则必须作为命名导入导入。

火焰兔

海报 链接