How To Fix “Export Default Was Not Found” Error In JavaScript?

Export default was not found Error in JavaScript

Modules are a new feature in ES6. Included with the Module are import and export concepts. It helps us to divide the source code into many modules to make it easier to manage. If you are getting an “export default was not found” error in JavaScript, don’t worry. It is not a difficult error to fix.

When does the “export default was not found” error in JavaScript appear on your console?

To answer this question, you must have a good understanding of module imports and exports in ES6. There are two types of exports: named export (export) and default export (export default), and corresponding to them are two types of imports: named import and default import.

The “export default was not found” error in JavaScript occurs when you try to use default import for named export in a React application. Look carefully at the example below to understand the problem:

In the App.js file:

import "./App.css";

// Default import
import Hello from "./components/Hello";

function App() {
    return (
        <div className="App">
            <Hello />
        </div>
    );
}

export default App;

In components/Hello.js file.

// Named export
export function Hello() {
    return <h1>Hello, This is learnshareIT</h1>;
}

As you can see in the Hello.js file, we use named export, and in the App.js file, we use default import. So we get an error like this:

export 'default' (imported as 'Hello') was not found in './components/Hello' (possible exports: Hello)

On the other hand, if we use default export in the Hello.js file and named import in the App.js file, the result is the same. This time, the error message is:

export 'Hello' (imported as 'Hello') was not found in './components/Hello' (possible exports: default)

How to fix this error?

Follow the rules below. You will definitely not have this error again:

Default export is always hand in hand with default import.

We use the default keyword to default export, and remember that we can export default only once.

To default import, we use the correct name of the variable we exported. Like this:

In the App.js file.

import "./App.css";

// Default import
import Hello from "./components/Hello";

function App() {
    return (
        <div className="App">
            <Hello />
        </div>
    );
}

export default App;

In components/Hello.js file.

function Hello() {
    return <h1>Hello, This is learnshareIT</h1>;
}

// Default export
export default Hello;

Output:

Named export is always hand in hand with named import.

To use named export, we need to use the export keyword in any variable we need to export.

To use named import, we use Object Destructuring { }.

See examples to better understand!

In the App.js file.

import "./App.css";

// named import by using { }
import { Hello, DESCRIPTION as Desc } from "./components/Hello";

function App() {
    return (
        <div className="App">
            <Hello />
            <p>{Desc}</p>
        </div>
    );
}

export default App;

In componets/Hello.js file.

// Named export
export function Hello() {
    return <h1>Hello, This is learnshareIT</h1>;
}

// Named export
export const DESCRIPTION = "The best place to learn JS Programming";

Output:

Summary

That’s it for this problem. With just two simple rules, you have completely avoided the “export default was not found” error in JavaScript. In addition, mastering these two principles also helps you proficiently work with Modules in ES6. Thanks for reading, and have a nice day!

Leave a Reply

Your email address will not be published. Required fields are marked *