“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
LearnShareITThe 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
LearnShareITIt 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:
- Attempted import error: ‘uuid’ does not contain a default export
- Export default was not found Error in JavaScript
I’m Edward Anderson. My current job is as a programmer. I’m majoring in information technology and 5 years of programming expertise. Python, C, C++, Javascript, Java, HTML, CSS, and R are my strong suits. Let me know if you have any questions about these programming languages.
Name of the university: HCMUT
Major: CS
Programming Languages: Python, C, C++, Javascript, Java, HTML, CSS, R
