JIYIK CN >

When we try to use import default importfrom default exporta module that does not have , we get a "does not contain a default export" error. To fix the error, make sure the module has named exports and wrap the import in curly braces, such as from'./myModule.import {myFunction}

The following is an example of how the error occurs.

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

We try to use default imports for named exports.

// Error: Attempted import error: file does not contain a default export
// 使用默认导入
import sum from './another-file';

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

Notice that in another-file.js, we used named exports to export the sum function, whereas in index.js, we used default import. That’s why the error occurred.

To resolve the "does not contain a default export" error, make sure:

1. When importing named exports, wrap them in curly braces
2. Use the default keyword when exporting a value as the default export
3. Each module can have at most one default export, but can have multiple named exports

Here is an example of how to resolve the error using named imports.

export function sum(a, b) {
  return a + b;
}

And import the function in index.js file.

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

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

注意, we did not use the default keyword for the named export, but instead enclosed the named import in curly braces.

Each file can have multiple named exports, but only one default export.

Here is an example of how to solve the error using default export and import.

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

Now we use the default import in our index.js file.

import sum from './another-file';

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

注意, we don't use curly braces when using default import.

Each file can have at most 1 default export.

If you want to export a variable as a default export, you must declare it on the first line and export it on the next line. You cannot declare and default export a variable on the same line.

const example = 'hello';

export default example;

It is also possible to mix and match, here is an example.

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

export const num = 20;

Here are the multiple imports

import sum, {num} from './another-file';

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

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

To resolve the "does not contain a default export" error, be consistent with ES6 imports and exports. If you export a value as a default export, you must import it as a default import, and if you export it as a named export, you must import it as a named import.