2

I am puzzled why the following doesn't work

GroupList.js

export default Relay.createContainer(List, {
...
})

which transpiled to:

exports.List = List;
exports['default'] = _reactRelay2['default'].createContainer(List, {
}
});

importing it as following DOESN'T WORK

import GroupList from './GroupList';

or

import {default as GroupList} from './GroupList';

but the following works

export const GroupList = Relay.createContainer(List, {
..
});

which transpiled to:

exports.List = List;
var GroupList = _reactRelay2['default'].createContainer(List, {
...
});

exports.GroupList = GroupList;

and importing this like in another module like this WORKS.

import {GroupList} from './GroupList';

so, what is the difference? That is, How to import it another file if I use the form

export default Relay.createContainer(List, {

Edit: addl info as requested by @bergi

working

transpiled import:

var _GroupList = __webpack_require__(324);

webpack module:

/***/ },
/* 324 */
/***/ function(module, exports, __webpack_require__) {

    /* WEBPACK VAR INJECTION */(function(module) {'use strict';

...
var GroupList = (0, _redux.compose)((0, _utilsRelay2['default'])({
...
}))(List);
exports.GroupList = GroupList;
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(34)(module)))

/***/ },
/* 325 */    

Not working:

transpiled import:

var _GroupList = __webpack_require__(324);

webpack module:

/***/ },
/* 324 */
/***/ function(module, exports, __webpack_require__) {

    /* WEBPACK VAR INJECTION */(function(module) {'use strict';

  ...

  exports.List = List;
    exports['default'] = (0, _redux.compose)(
  ...
  }))(List);
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(34)(module)))

/***/ },
/* 325 */

Error:

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) 
or a class/function (for composite components) but got: undefined. Check the render method of `GroupContainer`.
invariant @ invariant.js:39
instantiateReactComponent @ instantiateReactComponent.js:64
instantiateChild @ ReactChildReconciler.js:29traverseAllChildrenImpl @ traverseAllChildren.js:98
traverseAllChildren @ traverseAllChildren.js:186
ReactChildReconciler.instantiateChildren @ ReactChildReconciler.js:52
ReactMultiChild.Mixin._reconcilerInstantiateChildren @ ReactMultiChild.js:197
steveluscher
  • 4,144
  • 24
  • 42
bsr
  • 57,282
  • 86
  • 216
  • 316
  • What do you use to transpile? And what is the `import GroupList from './GroupList';` transpiled to? What's the error you get when it "doesn't work"? – Bergi Nov 14 '15 at 19:22
  • @Bergi please see the update. I made some change, so the component is wrapped in redux.compose, but the behavior is same when used the relay container directly. somehow it is giving error as not a valid react component. thanks for helping out – bsr Nov 14 '15 at 19:48
  • @Bergi also I use "babel": "^5.8.23", for transpiling – bsr Nov 14 '15 at 20:19
  • Looks related to [Babel 6 changes how it exports default](http://stackoverflow.com/q/33505992/1048572) – Bergi Dec 06 '15 at 14:29

0 Answers0