Requested module does not provide export named 'default'

avatar

Borislav Hadzhiev

Tue Oct 19 20212 min read

Requested module does not provide export named 'default' #

The error "The requested module does not provide an export named 'default'" occurs when we try to import a value or function from a file using a default import, but the value is not exported from the file with a default export.

requested module not provide export named default

Here's an example of how the error occurs. This is our index.js file:

index.js
// ๐Ÿ‘‡๏ธ named export export function sum(a, b) { return a + b; }

And this is a file that imports the function from index.js.

another-file.js
// โ›”๏ธ The requested module './index.js' does not provide // an export named 'default' import sum from './index.js'; console.log(sum(10, 10));

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 "The requested module does not provide an export named 'default'", use the default keyword when exporting a value from a file and don't wrap the corresponding import in curly braces. You can only have a single default export per file.

index.js
// ๐Ÿ‘‡๏ธ default export export default function sum(a, b) { return a + b; }

And import the function in the other file.

another-file.js
// ๐Ÿ‘‡๏ธ default import import sum from './index.js'; console.log(sum(10, 10)); // ๐Ÿ‘‰๏ธ 20

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

You can only have 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
const str = 'hello'; // โœ… Works export default str;

Here's how you use named imports/exports.

index.js
// ๐Ÿ‘‡๏ธ named export export function sum(a, b) { return a + b; }

And now we use a named import in the other file.

another-file.js
// ๐Ÿ‘‡๏ธ named import import {sum} from './index.js'; console.log(sum(10, 10)); // ๐Ÿ‘‰๏ธ 20

Notice the curly braces, this is how we import a named export.

You have to be consistent with your imports and exports. Don't use curly braces when importing default exports and use curly braces when importing named exports.

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

index.js
// ๐Ÿ‘‡๏ธ named export export const num = 33; // ๐Ÿ‘‡๏ธ default export export default function sum(a, b) { return a + b; }

And here are the imports.

another-file.js
// ๐Ÿ‘‡๏ธ default and named imports import sum, {num} from './index.js'; console.log(sum(10, 10)); // ๐Ÿ‘‰๏ธ 20 console.log(num); // ๐Ÿ‘‰๏ธ 33

We used a default import to import the sum function and a named import to import the num variable.

To solve the error "The requested module does not provide an export named 'default'", 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.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee