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

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

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