Possible strange behaviour with ES6 deconstruction syntax

Question

I've been using the deconstruction syntax { ...variable } for quite awhile now, but I've never really had a problem with it until today, while most of my use cases still work as expected this one is a bit confusing to myself.

I have a JS file that generates an object and exports it, ex:

var exports = {} 
...
export default exports;

There are not any nested objects and by the end of the file it's a simple KVP.

When trying to import from this file any objects I attempt to get through deconstruction are undefined. For example:

import { Foo, Bar } from './my-object';
Foo.bar(); // Cannot read property bar of undefined

However, if I break it apart farther like so, everything is fine:

import MyObject from './my-object';
const { Foo, Bar } = MyObject;
Foo.bar(); // Works!

I've tried changing exports to a different variable name as I thought maybe, just maybe it was a confliction with module.exports, but that wasn't the problem.

In the past whenever I exported an object it was simple:

 export default { ... }

I'm really confused on what the issue could be this time around as the result of console.log(exports) is the same thing:

{ Foo: foo, Bar: bar }

Where bar() is a function variable of foo

I should also add that trying to hack this to have the proper results doesn't work either, for example:

export default {
    Foo: { bar: () => {} },
    Bar: { foo: () => {} }
};

Still throws the same Cannot read property __ of undefined

Answer 1

If you are using Babel, it's because the export default statement is roughly translated to:

var foo = {};
exports["default"] = foo;

And import MyObject from './my-object' is translated to: var MyObject = require('./my-object').default;. Which is why your second example works.

However, when you're doing import { Foo, Bar } from './my-object', it is translated to var { Foo, Bar } = require('./my-object');

See this question for extra details.

---

In your case, I recommend just using the normal export statement. For example:

export class Foo {
  myMethod() {}
};

export const Bar = { a: '1' };

Then you can do import { Foo, Bar } from './my-object';.

Answer 2

I think You just miss the basic concept.

In this case You are exporting a single object not multiple classes that is why your import is not working as you are thinking.

The syntax works when we have a file say sample.js with

export var A = (function () {
    function A() {
    }
    return A;
}());

export var B = (function () {
    function B() {
    }
    return B;
}());

export var C = (function () {
    function C() {
    }
    return C;
}());

And if you are importing in other file with the following manner :

import { A, B, C } from './sample';

I have not tried this but I think It is working like this.

Answer 3

if you want to import { Foo, Bar} from './my-object', you need to explicitly export the Foo and Bar. e.g.

export const Foo = { bar() {} };
export const Bar = { foo() {} };