Destructuring a default export object

70
votes

Can I destructure a default export object on import?

Given the following export syntax (export default)

const foo = ...
function bar() { ... }

export default { foo, bar };

is the following import syntax valid JS?

import { foo, bar } from './export-file';

I ask because it DOES work on my system, but I've been told it should NOT work according to the spec.

2
javascriptes6-modules
Good question I look there but they also use export default { a, b} exploringjs.com/es6/ch_modules.html – Jonathan Dion
Who said that it should not work? But I agree with them, it should not work. Can you provide your environment settings or share a demo project somewhere? – Bergi
@Bergi: you did :) But I don't see this syntax constraint spelled out in the spec... – sfletche
To destructure on import you can export by defining an intermediate object const obj = {foo, bar} then export const { foo, bar } = obj – 647er

2 Answers

107
votes

Can I destructure a default export object on import?

No. You can only destructure an object after importing it into a variable.

Notice that imports/exports have syntax and semantics that are completely different from those of object literals / object patterns. The only common thing is that both use curly braces, and their shorthand representations (with only identifier names and commas) are indistinguishable.

Is the following import syntax valid JS?

import { foo, bar } from './export-file';

Yes. It does import two named exports from the module. It's a shorthand notation for

import { foo as foo, bar as bar } from './export-file';

which means "declare a binding foo and let it reference the variable that was exported under the name foo from export-file, and declare a binding bar and let it reference the variable that was exported under the name bar from export-file".

Given the following export syntax (export default)

export default { foo, bar };

does the above import work with this?

No. What it does is to declare an invisible variable, initialise it with the object { foo: foo, bar: bar }, and export it under the name default.
When this module is imported as export-file, the name default will not be used and the names foo and bar will not be found which leads to a SyntaxError.

To fix this, you either need to import the default-exported object:

import { default as obj } from './export-file';
const {foo: foo, bar: bar} = obj;
// or abbreviated:
import obj from './export-file';
const {foo, bar} = obj;

Or you keep your import syntax and instead use named exports:

export { foo as foo, bar as bar };
// or abbreviated:
export { foo, bar };
// or right in the respective declarations:
export const foo = …;
export function bar() { ... }
6
votes

Yes, with Dynamic Imports

To add to Bergi's answer, note that in the case of dynamic imports, since the returned module is an object, you can use destructuring assignment to import it:

(async function () {
  const { default: { foo, bar } } = await import('./export-file.js');
  console.log(foo, bar);
})();

Why this works

import operates much differently in different contexts. When used at the beginning of a module, in the format import ... from ... , it is a static import, which has the limitations discussed in Bergi's answer.

When used inside a program in the form import('./filename.js'), it is considered a dynamic import. The dynamic import operates very much like a function that resolves to an object (as a combination of named exports and the default export, which is assigned to the default property), and can be destructured as such.

In the case of the questioner's example, await import('./export-file.js') will resolve to:

{
  default: {
    foo: ...,
    bar: function bar() {...}
  }
}

From here, you can just use nested destructuring to directly assign foo, and bar:

const { default: { foo, bar } } = await import('./export-file.js');