Skip to main content

How to Resolve the "does not provide an export named 'default'" Error in JavaScript

The SyntaxError: The requested module '...' does not provide an export named 'default' (and its variations like Attempted import error) is one of the most common errors when working with ES Modules in JavaScript. It occurs when you try to use a default import to import something from a module that only has named exports, or no exports at all.

This guide will explain the fundamental difference between default and named imports and show you how to fix this error by using the correct import syntax for the module you are trying to use.

The Core Problem: Named vs. Default Imports​

JavaScript's ES Module system has two primary ways to export and import code:

  • Named Exports:

    • A module can have many named exports.
    • They are exported with the export keyword before a declaration (e.g., export const myVar = ...).
    • They must be imported using their exact names inside curly braces ({ }).

  • Default Export:

    • A module can have only one default export.
    • They are exported with the export default keywords.
    • They are imported without curly braces.

The error does not provide an export named 'default' occurs when you mix these up, specifically when you try to do this: import Something from './my-module.js'; ...but './my-module.js' does not contain an export default.

The Solution: How to Fix the Error​

There are two ways to fix this, depending on whether you can change the exporting file or the importing file.

Solution A (Most Common): Change the Import Syntax​

If the module you're importing from uses named exports, you must use a named import.

helpers.js (The exporting file):

// This file uses a NAMED export.
export const myHelper = () => {
  console.log('Hello!');
};

main.js (The importing file):

// PROBLEM: This is a default import, but `helpers.js` has no default export.
// import myHelper from './helpers.js'; // This will cause the error.

// SOLUTION: Use a named import with curly braces.
import { myHelper } from './helpers.js';

myHelper(); // Output: 'Hello!'

Solution B: Change the Export Syntax​

If you control the exporting file and it truly has only one main value, you can change it to use a default export.

helpers.js (The exporting file):

// SOLUTION: Change this file to use a default export.
const myHelper = () => {
  console.log('Hello!');
};

export default myHelper;

main.js (The importing file):

// Now, this default import will work correctly.
import myHelper from './helpers.js';

myHelper(); // Output: 'Hello!'

Common Scenarios and How to Fix Them​

Importing Your Own Files​

This is the most common scenario. You've created two files and mixed up the import/export syntax.

math.js:

// Using named exports
export const add = (a, b) => a + b;
export const PI = 3.14;

app.js:

// PROBLEM: Incorrect default import
// import add from './math.js'; 

// SOLUTION: Use a named import
import { add, PI } from './math.js';

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

Importing from an NPM Package (e.g., uuid)​

This error is also very common when using third-party libraries. Some libraries provide a default export, while others only provide named exports. You must check the library's documentation to know which to use. The uuid package, for example, only uses named exports.

Problem:

// PROBLEM: `uuid` has no default export, so this fails.
// import uuid from 'uuid';

Solution: You must import the specific functions you need (like v4) using a named import. It's also a common practice to rename the import with the as keyword for convenience.

// SOLUTION: Use a named import and optionally rename it.
import { v4 as uuidv4 } from 'uuid';

const newId = uuidv4();
console.log(newId); // Output: e.g., 'a1b2c3d4-e5f6-7890-1234-567890abcdef'

Conclusion​

The "does not provide an export named 'default'" error is always a mismatch between your import statement and the export statement in the module you are importing.

To fix it:

  1. Check the exporting file or the library's documentation. Does it use export default or just export?
  2. If it uses named exports (e.g., export const myVar), you must use a named import: import { myVar } from './module.js'.
  3. If it uses a default export (e.g., export default myVar), you must use a default import: import myVar from './module.js'.

By ensuring your import syntax matches the export syntax, you will resolve this common module error.

Table of Contents