CODEWITHSUNDEEP
javascriptecmascript-6
Liga
Liga

Reputation: 3439

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

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

Upvotes: 43

Views: 140087

Answers (2)

Zak
Zak

Reputation: 1165

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

Upvotes: 36

molamk
molamk

Reputation: 4126

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

Upvotes: 50

Related Questions