1

After updating to babel 6 the following:

containers/
    game.js
action-creators/
    actionCreators.js
    asyncActionCreators.js
    index.js

actionCreators.js has the following code: 

export function x(){}
export function y(){}

asyncActionCreators.js has the following code: 

export const j = () => (a, b) => {}
export const k = () => (a, b) => {}

index.js contains the following code: 

import _ from 'lodash';
import * as actions from './actionCreators';
import * as asyncActions from './asyncActionCreators';

const Actions = _.assign(actions, asyncActions);
export default Actions;

In game.js I have the following code: 

import * as Actions from './../action-creators';

Actions evaluates to: 

{ 
    __esModule: true
    default: Object
    __proto__: Object
}

Can someone explain?

loganfsmyth
  • 156,129
  • 30
  • 331
  • 251
walkerrandophsmith
  • 564
  • 5
  • 14
  • How are you logging this? Are you using `require` directly anywhere? Are you using any modules like Jest that interfere with module loading? – loganfsmyth Dec 30 '15 at 02:51
  • In the file that imports * as Actions, I have a debugger statement in the consumer of Actions ``` function(dispatch){ debugger; bindActionCreators(Actions, dispatch) }``` and using Chrome developer console. I am not using Jest, however I am unaware if I am using any modules that interfere with module loading. Do you have resources to that so I can inform myself? – walkerrandophsmith Dec 30 '15 at 02:53
  • What do you get if you actually `console.log(Actions)` in your file? Generally the dev tools can be misleading since imports are generally aggressively renamed. – loganfsmyth Dec 30 '15 at 02:56
  • I get the same result an object with the three properties described above – walkerrandophsmith Dec 30 '15 at 03:02
  • I was able to avoid the issue altogether by dumping all the exported functions into index. Then when I `import * as Actions from './../actionCreators'` I don't experience the issue. – walkerrandophsmith Dec 30 '15 at 03:04
  • I'm confused, is your sibling example supposed to be `./../action-creators` so it uses the index? At the moment you have an index that isn't actually used. – loganfsmyth Dec 30 '15 at 03:09
  • I understand why you may be confused since I mistyped the path, it should be `./../action-creators`, the file `containers/game.js` is including the import statement with the intention of including `./action-creators/index.js` – walkerrandophsmith Dec 30 '15 at 03:14
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/99265/discussion-between-walker-randolph-smith-and-loganfsmyth). – walkerrandophsmith Dec 30 '15 at 03:49

1 Answers1

2

This is behaving as expected. Your index.js file has exported a default export only.

import * as Actions from './../action-creators';

will import all named exports and the default export, but you do not have any named exports. Your method did work in Babel 5, but it was not valid according to the ES6 spec's mapping of imports to exports. This has been discussed in Babel 6 changes how it exports default.

Rather than

import _ from 'lodash';
import * as actions from './actionCreators';
import * as asyncActions from './asyncActionCreators';

const Actions = _.assign(actions, asyncActions);
export default Actions;

what you should be doing is

export * from './actionCreators';
export * from './asyncActionCreators';

which basically takes all of the named exports from the files and exports them from the index.

Community
  • 1
  • 1
loganfsmyth
  • 156,129
  • 30
  • 331
  • 251