Skip to main content

How to Solve the "SyntaxError: The requested module ... does not provide an export named ..." Error in JavaScript

The SyntaxError: The requested module ... does not provide an export named '...' is a very common error when working with ES Modules in JavaScript. It occurs when you try to use a named import to import a value that was exported as a default export, or if the name you are trying to import simply doesn't exist in the target module.

This guide will clarify the crucial difference between named and default exports and show you the correct syntax to use for each, which will solve this error.

The Core Concept: Named vs. Default Exports​

ES Modules have two primary ways to export a value from a file:

Named Exports​

  • You can have multiple named exports per file.
  • They are exported using the export keyword followed by a variable or function declaration.
  • They must be imported using the exact same name enclosed in curly braces {}.

utils.js:

// Exporting two named members
export const PI = 3.14;
export function greet(name) {
  return `Hello, ${name}`;
}

main.js:

// Importing named exports with curly braces
import { PI, greet } from './utils.js';

Default Export​

  • You can only have one default export per file.
  • It is exported using the export default keywords.
  • It is imported without curly braces, and you can give it any name you want during the import.

my-module.js:

// Exporting a single default function
export default function myCoolFunction() {
  // ...
}

main.js:

// Importing the default export without curly braces
import anyNameYouWant from './my-module.js';

Scenario 1 (Most Common): Importing a Default Export with Named Syntax​

This is the most frequent cause of the error. The module you are importing from has a default export, but you are trying to import it using the named import syntax (with curly braces).

Example of problem: math.js:

// This module has a DEFAULT export.
export default function add(a, b) {
  return a + b;
}

main.js:

// ⛔️ Problem: Using curly braces `{}` to import a default export.
import { add } from './math.js'; 
// SyntaxError: The requested module './math.js' does not provide an export named 'add'.

This fails because the math.js module does not have a named export called add. Its only export is the default one.

Solution: Remove the curly braces to use the correct default import syntax.

// ✅ Correct: Import the default export without curly braces.
import add from './math.js';

console.log(add(2, 3)); // Output: 5

Scenario 2: Importing a Named Export with Default Syntax​

The reverse mistake can also happen, though it often results in a different error (TypeError: ... is not a function).

Example of problem: helpers.js:

// This module has a NAMED export.
export function log(message) {
  console.log(message);
}

main.js:

// ⛔️ Problem: Not using curly braces to import a named export.
import log from './helpers.js';

log('Hello'); // TypeError: log is not a function

This happens because log is undefined—the module has no default export.

Solution: Add curly braces to use the correct named import syntax.

// ✅ Correct: Import the named export with curly braces.
import { log } from './helpers.js';

log('Hello'); // Output: Hello

Scenario 3: Misspelled or Non-Existent Export​

The error will also occur if you simply misspell the name of a named import or try to import something that isn't exported at all.

Example of problem: config.js:

export const appName = 'My App';

main.js:

// ⛔️ Problem: "appName" is misspelled as "Appname".
import { Appname } from './config.js'; 
// SyntaxError: ... does not provide an export named 'Appname'.

Solution: ensure the name inside the curly braces {} exactly matches the name of the exported member, including casing.

Conclusion​

The "The requested module does not provide an export named" error is always a mismatch between how a value is exported and how it is imported.

To solve it, check the module you are importing from and ensure you are using the correct syntax:

  • If the module uses export default, you must import it without curly braces (e.g., import myModule from './file.js').
  • If the module uses export (without default), you must import it with the exact same name inside curly braces (e.g., import { myValue } from './file.js').

By being consistent with your import and export syntax, you can easily avoid this common error.

Table of Contents