Issue with mangling imports

[technicallyfeasible]

I have a problem with imports when using react-transform and am not quite sure if this is created by react-transform or babel itself or even something I am doing wrong in my config.

In my source file, I am importing a file like this:

import widgetGroups from '../widgetGroups';

Without react-transform, babel translates it to:

var _widgetGroups2 = __webpack_require__(1153);
var _widgetGroups3 = _interopRequireDefault(_widgetGroups2);

Whereas with react-transform, I get:

var _widgetGroups = __webpack_require__(1153);
var _widgetGroups2 = _interopRequireDefault(_widgetGroups2['default']);

This obviously cannot work and throws an error.

[technicallyfeasible]

To possibly answer my own question. This issue was caused by the module importing widgetGroups. There was a naming conflict which did not throw a compiler error but silently changed variable names to non-conflicting ones. Here's a skeleton of the class:

import widgetGroups from '../widgetGroups';

export default class WidgetGroup extends Component {
  render() {
    return (
      <div>
        {this.widgetGroups()}
      </div>
    );
  }

  widgetGroups() {
    return widgetGroups;
  }
}

Renaming the function widgetGroups to getWidgetGroups solved it.

[gaearon]

Do you think you can whip up a failing test from this?

[BenoitZugmeyer]

Trying to migrate from react-hot-loader to this stuff, I have the same issue. I wrote a fixture to reproduce: BenoitZugmeyer@6ec563b

[gaearon]

Thanks. If you can take time to try to fix it I'd appreciate. :-)

[gaearon]

I can’t reproduce this in 2.x.
Most probably this has been fixed as part of the rewrite.
Please let me know if you still have this issue!