Does not contain a default export Error in React.js

Are you struggling with the error “Attempted import error: file does not contain a default export” in your React.js app? This error occurs when you try to use a default import to import a value from a module that doesn’t have a default export. In this article, we’ll go over how to fix this error and prevent it from happening again.

Understanding the “Does Not Contain a Default Export” Error

To understand the error better, let’s look at an example:

Example of the Error

another-file.js

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

In the another-file.js module, we have a named export sum, which is a function that returns the sum of its two arguments a and b. Now let’s say we try to use a default import for this named export in the index.js file:

index.js

import sum from './another-file';console.log(sum(5, 10));

This will result in the error “Attempted import error: file does not contain a default export“. This happens because in the another-file.js module, we used a named export (export function sum(a, b)) to export the sum function, but in the index.js file, we used a default import (import sum from ‘./another-file’;) to import it.

Solving the “Does Not Contain a Default Export” Error

To solve the “does not contain a default export” error, you need to make sure:

• You wrap named exports in curly braces when importing them, e.g. import {myFunction} from ‘./myModule’;
• You use the default keyword when exporting a value as a default export, e.g. export default myFunction;
• Each module only has a maximum of 1 default export, but it can have multiple named exports.

Here’s an example of how to solve the error using a named import:

another-file.js

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

index.js

import {sum} from './another-file';console.log(sum(5, 10));

In this case, we don’t use the default keyword for the named export and wrap the named import in curly braces.

[Fixed]: Format a Date as MM/DD/YYYY in JavaScript

On the other hand, if you want to use a default export, you can do so by declaring the value as a default export and importing it as a default import. Here’s an example:

another-file.js

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

index.js

import sum from './another-file';console.log(sum(5, 10));

Note that you don’t use curly braces when working with default imports.

It’s also worth noting that you can have a maximum of 1 default export per file, but you can have multiple named exports. For example:

export const num = 20;

You can then import both the default and named exports in the index.js file like this:

import sum, {num} from './another-file';console.log(sum(num, 10));

Finally, if you are exporting a variable as a default export, you have to declare it on one line and export it on the next. You cannot declare and default export a variable on the same line. For example:

const example = 'hello';export default example;

Conclusion

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

I hope this helps clarify the cause and solution for the “does not contain a default export” error in React.js applications. Happy coding!