React.js 中不包含默认导出错误

React.js 中不包含默认导出错误

Does not contain a default export Error in React.js

当我们尝试使用默认导入从没有默认导出的模块导入时，会出现“不包含默认导出”错误。要解决该错误，请确保模块具有命名导出并将导入用大括号括起来，例如import {myFunction} from './myModule.

下面是错误如何发生的示例。

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

我们尝试对命名导出使用默认导入。

// ⛔️ Error: Attempted import error: file does not contain a default export
// 👇️ using a default import
import sum from './another-file';

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

请注意，another-file.js我们使用命名导出来导出sum
函数，而index.js我们使用默认导入。这就是发生错误的原因。

要解决“不包含默认导出”错误，请确保：

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

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

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

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

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

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

我们不对default命名导出使用关键字，而是将命名导入用大括号括起来。

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

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

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

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

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

We don’t use curly braces when working with default imports.

If you are exporting a variable as a default export, you have to declare it on 1
line and export it on the next. You can’t declare and default export a variable
on the same line.

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

export default example;

You can also mix and match, here’s an example.

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

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

And here are the imports.

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

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

We used a default import to import the sum function and a named import to
import the num variable.

Conclusion #

To solve the “does not contain a default export” error, be consistent with
your ES6 imports and exports. If a value is exported as a default export, it has
to be imported as a default import and if it’s exported as a named export, it
has to be imported as a named import.