How to Solve does not provide an export named ‘default’

by

To solve the error ‘does not provide an export name default’ in JavaScript, use the default keyword to make it the default export and the import. For example, the SyntaxError occurs when we try to import a function or value from the file using default import, but the file does not contain a default export.

Let’s see a scenario where we get SyntaxError.

Create a JavaScript file where we declare a function sum, and we are importing it into another JS file.

file1.js

export function sum(a, b){
    return a+b;
}

This is using named export. Now, write the below file that imports the function from file1.js.

file2.js

import sum from "./file1.js";

let x = sum(15, 40);
console.log(x);

If you run the file2.js file using the node app file, you will get the following error.

This code will generate a ‘does not provide an export name default’ error because, in file1, we used named export, and in file2, we are importing the function using default export.

SyntaxError: The requested module './file1.js' does not provide an export named 'default'

Solved: does not provide an export named ‘default’

To solve SyntaxError: does not provide an export named ‘default’; use the default keyword to make it the default export and the import. Then import a function without wrapping the corresponding import in curly braces. We can only have a single export default in a JavaScript file.

file1.js

export default function sum(a, b){
    return a+b;
}

This is using named export. Now below file imports the function from file1.js.

file2.js

import sum from "./file1.js";

let x = sum(15, 40);
console.log(x);

Output

55

Note: we never work with curly braces when working with default exports. We import a named export inside curly braces.

file2. js

import { sum } from './sqcube.js';

let x = sum(15, 40);
console.log(x);

If you run the above file, you will get the following error.

SyntaxError: The requested module './file1.js' does not provide an export named 'sum'

Ensure not to use curly braces when you want to import default exports and use curly braces when you want to import named exports.

That’s it for this tutorial.

Related posts

How to Solve cannot find module and its corresponding type declarations

How to Solve cannot read property of null

How to Solve SyntaxError: Unexpected end of input

How to Solve Uncaught ReferenceError: required is not defined

How to solve reference error: window is not defined

Leave a Comment