ES6 export and import name functions?

Question

I have some functions and I want to keep them in an external js file. eg.

in functions.js

var double = function(x) {
  return x + x;
}

export { double };

Then in my main js file:

import double from './functions';

...

double(2)

I get this error:

Uncaught TypeError: (0 , c.default) is not a function
    at bundle.min.js:44

When I read the line 44:

(0, _functions2.default)(2);

Any ideas why? What have I missed?

Answer 1

You're confusing default and named exports.

If you export { double } you must import { double } from './functions';

If you only have one export, it's preferable to use the default export:

export default double;

Then you can import double from './functions':

The reason for this is that named exports allow you to import only part of a module. For example:

export function add (a, b) { return a + b; }
export function subtract (a, b) { return a - b; }

You can then import { add } from './math.js'; without importing subtract.

However, if you are only exporting one function from a module, the default export is more convenient.

Answer 2

Use:

var double = function(x) {
  return x + x;
}

 export {double};

and

import {double} from './functions';

Or

export default double;

and

import double from "./functions.js";