Borislav Hadzhiev
Tue Feb 22 2022·3 min read
Photo by Toa Heftiba
The "export default was not found" error occurs when we when we try to import
as default 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. This is our index.js
file.
// 👇️ named export export function sum(a, b) { return a + b; }
And this is a file that imports the function from index.js
.
// ⛔️ Error: export default was not found // 👇️ default import import sum from './index'; console.log(sum(5, 5));
Notice that in our index.js
file we used a named export, but when we imported
the function in the other file we used a default import. This is the reason the
error occurs.
To solve the error "export default was not found", make sure:
default
keyword when exporting a value as a default exportHere is an example of how to solve the error using a default export.
// 👇️ default export export default function sum(a, b) { return a + b; }
And import the function in the other file.
// 👇️ default import import sum from './index'; console.log(sum(5, 5));
Notice that we do not 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.
// 👇️ default export const example = 'hello world'; export default example;
You can only have a single default export per module, but you can have multiple named exports.
Here is how you use named imports/exports.
// 👇️ named export export function sum(a, b) { return a + b; }
And now we use a named import in the other file.
// 👇️ named import import {sum} from './index'; console.log(sum(5, 5));
Notice the curly braces, this is how we import a named export.
You can also mix and match, here's an example.
// 👇️ named export export const num = 33; // 👇️ default export export default function sum(a, b) { return a + b; }
And here are the imports.
// 👇️ default and named imports import sum, {num} from './index'; console.log(sum(num, 25));
We used a default import to import the sum
function and a named import to
import the num
variable.
To solve the "export default was not found" 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.