Does not contain a default export Error in React.js

Does not contain a default export Error in React.js #

The "does not contain a default export" error occurs when we try to use a default import to import from a module that doesn't have a default export. To solve the error, make sure the module has a named export and wrap the import in curly braces, e.g. import {myFunction} from './myModule.

Here is an example of how the error occurs.

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

And we try to use a default import for a named export.

Copied!
// ⛔️ 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));

Notice that in another-file.js we used a named export to export the sum function and in index.js we used a default import. This is the reason the error occurs.

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

1. To wrap named exports in curly braces when importing them
2. Use the default keyword when exporting a value as a default export
3. Each module only has a maximum of 1 default export, but could have multiple named exports

Here is an example of how to solve the error using a named import.

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

And import the function in the index.js file.

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

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

We don't use the default keyword for named exports and wrap a named import in curly braces.

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

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

And now we use a default import in the index.js file.

Copied!
// 👇️ 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.

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

export default example;

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

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

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

And here are the imports.

Copied!
// 👇️ 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.