Skip to main content

How to Resolve "export default was not found" Error in JavaScript

The error "export 'default' (imported as '...') was not found" is a common issue when working with ES modules in JavaScript. It occurs when you try to use a default import to import a value from a file that does not have a export default statement.

This guide will explain the critical difference between named exports and default exports, show you how this error occurs, and provide the simple solutions to fix it by correctly matching your import and export statements.

The Core Problem: Default vs. Named Exports

ES modules have two primary ways to export values from a file:

Named Exports

  • You can have many named exports in a single file.
  • They are exported with the export keyword before a declaration.
  • They must be imported using curly braces {...} and the exact same name.
// exporting.js
export const myVariable = 10;
export function myFunction() { /* ... */ }

// importing.js
import { myVariable, myFunction } from './exporting.js';

Default Export

  • You can only have one default export per file.
  • It is exported with the export default keywords.
  • It can be imported without curly braces and can be given any name.
// exporting.js
export default function myFunction() { /* ... */ }

// importing.js
import anyNameYouWant from './exporting.js';
note

The export default was not found error happens when these two styles are mixed up.

How the Error Occurs

The error occurs when you try to use a default import (no curly braces) to import a value that was exported using a named export.

Let's see with an example:

utils.js (using a named export):

// ⛔️ This is a NAMED export
export function sum(a, b) {
return a + b;
}

main.js (incorrectly using a default import):

// ⛔️ Error: "export 'default' (imported as 'sum') was not found in './utils.js'"
import sum from './utils.js';

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

This fails because the import sum from ... syntax is specifically looking for an export default in utils.js, but it can't find one.

Solution 1: Change the Import to a Named Import

If the exporting file uses named exports, the simplest solution is to change your import statement to match.

Solution: wrap the imported name in curly braces to make it a named import.

utils.js (no change):

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

main.js (corrected):

// ✅ Correct: Using a named import with curly braces
import { sum } from './utils.js';

console.log(sum(5, 5)); // Output: 10
note

This is the recommended best practice when a module provides multiple named exports.

Solution 2: Change the Export to a Default Export

If you control the exporting file and it is only intended to export a single value, you can change the export to a default export.

Solution: add the default keyword to the export statement.

utils.js (corrected):

// ✅ Correct: Using a default export
export default function sum(a, b) {
return a + b;
}

main.js (no change):

import sum from './utils.js';

console.log(sum(5, 5)); // Output: 10
note

This is a good choice for modules that have one primary function or class.

How to Use Both in the Same File

You can mix and match default and named exports in the same file, which is a common pattern.

utils.js:

// Named export
export const version = '1.0';

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

main.js:

// Import the default export and the named export in the same line
import sum, { version } from './utils.js';

console.log(`Using version ${version}`);
console.log(sum(10, 5));

Conclusion

The "export default was not found" error is a simple mismatch between your import and export statements.

  • If a module uses export const ... or export function ..., you must import it with curly braces: import { myValue } from './module.js'.
  • If a module uses export default ..., you must import it without curly braces: import myValue from './module.js'.

By ensuring your imports correctly match your exports, you can easily resolve this error and work effectively with ES modules.