The requested module does not provide an export named in JS

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Check out my new book

The requested module does not provide an export named #

The error "The requested module does not provide an export named" occurs when mixing up default and named ES6 module imports and exports. To solve the error make sure to import default exports without using curly braces and import named exports with curly braces.

requested module not provide export named

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

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

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

another-file.js
// ⛔️ should not use curly braces import {sum} from './index.js'; console.log(sum(10, 15));

Notice that in our index.js file we used a default export, but when we imported the function in the other file we used a named import. This is the reason the error occurs.

You can use default imports/exports with ES6 modules in the following way:

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, 15));

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

You can only have 1 default export per file.

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, 15));

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 = 100; // 👇️ 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, 15)); // 👉️ 25 console.log(num); // 👉️ 100

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", 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 3,000 articles.