Uncaught Syntaxerror: the Requested Module '. /Add. Js' Does Not Provide an Export Named 'Add'

Question

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;
}

Accepted Answer

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';

Accepted Answer

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 :

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

Uncaught Syntaxerror: the Requested Module '. /Add. Js' Does Not Provide an Export Named 'Add'

2 Answers

Option 1

Option 2

Must Read

Your Answer

Robert Thorne

Uncaught Syntaxerror: the Requested Module '. /Add. Js' Does Not Provide an Export Named 'Add'

2 Answers

Option 1

Option 2

Must Read

Your Answer

Sign up or log in

Post as a guest

Robert Thorne