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

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

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

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

  1. 在导入时将命名的导出包在花括号中
  2. 将值导出为默认导出时使用 default 关键字
  3. 每个模块最多只有 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 导入和导出保持一致。 如果一个值作为默认导出导出,则它必须作为默认导入导入,如果它作为命名导出导出,则必须作为命名导入导入。