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
exportkeyword 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 defaultkeywords. - 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';
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
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
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 ...orexport 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.