Uncaught SyntaxError: The requested module './add.js' does not provide an export named 'add'

29
votes

I am trying to learn ES6 imports and exports but I ran into an error that is not letting me import my module. I also tried import .. from 'add.js' without ./ but still no luck.

Uncaught SyntaxError: The requested module './add.js' does not provide an export named 'add'

My folder structure looks like this

C:\xampp\htdocs\es6\import.export\
- index.html
- app.js
- add.js

index.html

<html>
    <head>
        <script type="module" src="app.js"></script>
    </head>

    <body>

    </body>
</html>

app.js

import { add } from './add.js'

console.log(add(2,3))

add.js

export default function add (a, b) {
// export default function (a, b) { <-- does not work either, same error
    return a + b;
}
2
javascriptecmascript-6
See the export default? So it's a default export, not a named export - CertainPerformance
Still doesn't work. I changed it to export default function (a, b) - Liga
Remove the "default", else it'll be a default export, not a named export - CertainPerformance
use import add from './add.js' - Şivā SankĂr
Possible duplicate of Javascript (ES6), export const vs export default - adiga

2 Answers

25
votes

There are two kinds of exports: named exports (several per module) and default exports (one per module). It is possible to use both at the same time, but usually best to keep them separate.

If you want to import the module's default, the curly braces '{}' are not needed :

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_the_default_export

You can use curly braces '{}' for named exports :

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_named_exports

30
votes

Option 1

Name your export instead of using default. It should look like this

// add.js
export const add =  (a, b) =>  a + b;
// OR
// export const add = function(a, b) { return a+b };

// app.js
import { add } from './add';

Option 2

Use the export default syntax. It looks like this

// add.js
export default function add(a, b) {
  return a + b;
}

// app.js
import add from './add';