Solve - Does not contain a default export Error in React.js

avatar

Borislav Hadzhiev

Wed Feb 23 20222 min read

Solve - does not contain a default export Error #

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.

does not contain default export

Here is an example of how the error occurs.

another-file.js
// 👇️ named export export function sum(a, b) { return a + b; }

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

index.js
// ⛔️ 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.

another-file.js
// 👇️ named export export function sum(a, b) { return a + b; }

And import the function in the index.js file.

index.js
// 👇️ named import import {sum} from './another-file'; console.log(sum(5, 10));

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

You can have multiple named exports per file, but you can only have one default export.

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

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

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

index.js
// 👇️ default import import sum from './another-file'; console.log(sum(5, 10));

Notice that we do not use curly braces when working with default imports.

You can have a maximum of 1 default export per file.

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.

index.js
// 👇️ default export const example = 'hello'; export default example;

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

another-file.js
// 👇️ default export export default function sum(a, b) { return a + b; } // 👇️ named export export const num = 20;

And here are the imports.

index.js
// 👇️ 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.

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.

Use the search field on my Home Page to filter through my more than 1,000 articles.