Import statement and Babel

Question

I'm defining two constants using keyMirror from Facebook's fbjs.

// file1.js
import keyMirror from 'fbjs/lib/keyMirror'
export default keyMirror({
    CONST1: null,
    CONST2: null,
})

then import them in file2.js:

// file2.js
import { CONST1, CONST2 } from './file1'
console.log(CONST1) // undefined

their values can't be resolved. If I change file2.js like so:

// file2.js
import constants from './file1'
console.log(constants.CONST1) // CONST1

it works fine. What's wrong with it? I'm using Babel 6 with babel-preset-es2015 to run the scripts.

score 9 · Accepted Answer · edited May 23 '17 at 12:15

9

Your imports do not match, if you export a default export, you must import a default. If you want to import using named exports, then you need to export using named exports.

For

import { CONST1, CONST2 } from './file1'

to work, you'd need

export let {CONST1, CONST2} = keyMirror({
    CONST1: null,
    CONST2: null,
});

The { CONST1, CONST2 } after import in ES6 module syntax is unrelated to destructuring, so you should not think of it as pulling properties off of the default export. Instead, think of it as a list of names to import from the module.

Your solution would potentially have worked with Babel 5, but it was still invalid, even then. You can see this answer for more of an explanation of that.

Each ES6 module exports a set of exports, with default being special-cased for simplicity.

import constants from './file1';

is short for

import {default as constants} from './file1';

and

export default keyMirror({
    CONST1: null,
    CONST2: null,
})

is essentially short for

var temp = keyMirror({
    CONST1: null,
    CONST2: null,
});
export {temp as default};

edited May 23 '17 at 12:15

Community

1
1

answered Dec 14 '15 at 01:31

loganfsmyth

156,129
30
331
251

Hm, don't we have a duplicate for this? – Bergi Dec 14 '15 at 01:49
It is totally possible. – loganfsmyth Dec 14 '15 at 01:55
While your explanation seems logical, the example given above is very much similar to NuclearJS shopping cart example. Have a look at [`actionTypes.js`](https://github.com/optimizely/nuclear-js/blob/master/examples/shopping-cart/src/actionTypes.js) where constants are defined and [`productStore.js`](https://github.com/optimizely/nuclear-js/blob/master/examples/shopping-cart/src/stores/ProductStore.js) where they're imported using the former syntax in my question. It works fine using Webpack, but with Babel, it gives the error mentioned. – FuzzY Dec 14 '15 at 02:04
1

Great, thanks for the examples. That is indeed invalid, but it worked in the past because of this: http://stackoverflow.com/questions/33505992/babel-6-changes-how-it-exports-default/33506169#33506169 – loganfsmyth Dec 14 '15 at 02:07
Thank you for the link. It seems to be the case. Please update your answer with that link and a bit of explanation so that I can mark it as answered. – FuzzY Dec 14 '15 at 02:25
I've been banging my head for hours, I was using `import {...}` instead of `import ...` Thanks ! – maxime1992 Jan 14 '16 at 09:38

Import statement and Babel

1 Answers1