Requested Module Does Not Provide Export Named ‘Default’ In Javascript – How To Fix It?

"Requested module does not provide export named 'default'" in Javascript

“Requested module does not provide export named ‘default'” in Javascript is an error that happens when we attempt to import some functions or some values from an external file using named import, but you use the value which is default exported to the project.

What causes the error “Requested module does not provide export named ‘default'” in Javascript?

In essence, this issue occurs when you define an export default function inside a module but declare it as a named module when you import to use it, and vice versa. For instance, the file index.js contains an export default function.

// Declare export default function
export default function hello() {
  console.log("LearnShareIT")
}

After that, you import them into the HTML code and utilize them as a named function:

<html>
  <body>
    <h1>LearnShareIT</h1>
    <script type="module">

      // Import the function as a named function (with brackets)
      import {hello} from './index.js';

      console.log(hello());
    </script>
  </body>
</html>

Output:

Programmers cannot simultaneously use named and default exports and imports in ES6. If that is the root of your issue, the following remedy is what we advise you to try.

How to solve this error?

Using default export

You have to continue the exports and imports the same way in your program, as we have previously stated. Curly brackets should only be used when importing specified exports; never default exports.

In index.js:

// Declare export default function
export default function hello() {
  console.log("LearnShareIT")
}
<html>
  <body>
    <h1>LearnShareIT</h1>
    <script type="module">

      // Import the function as a default function (without brackets)
      import hello from './index.js';

      console.log(hello());
    </script>
  </body>
</html>

Output

LearnShareIT

The program’s default import and export functions were utilized in the aforementioned example. As is evident, we fail to include the curly brackets ({}) around the word “hello” that is the function name we want to export, when we import it into the HTML document. Please look at the following example if you want to import and export a named function rather than the default function.

Using named export

You may also solve this issue by exporting a named function in your module code. When you need to utilize that function, import them using the brackets ({}) as a named function.

// Declare export named function
export function hello() {
  console.log("LearnShareIT")
}
<html>
  <body>
    <h1>LearnShareIT</h1>
    <script type="module">

      // Import the function as a named function (with brackets)
      import {hello} from './index.js';

      console.log(hello());
    </script>
  </body>
</html>

Output

LearnShareIT

It is evident that employing named exports yields the same outcomes as the previous option. Thus, avoid combining those usages because it is the reason that causes the error.

Summary

In this article, we have helped you to deal with the JavaScript error “Requested module does not provide export named ‘default'”. By importing and exporting external modules correctly, you can easily avoid this error.

Maybe you are interested:

Leave a Reply

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