babel transpilation returns object instead of string or function

My Component code looks like below.

    import React, { Component, PropTypes } from 'react';

export default class HeroBanner extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { columns, content } = this.props.data;

    return (
      <div className="conatainer-class">

      </div>
    );
  }
}

HeroBanner.propTypes = {
  content: PropTypes.object,
  columns: PropTypes.string,
};

And my .babelrc file is :

{
 "presets": ["react", "es2015","stage-0"],
 "plugins": ["transform-es2015-modules-amd"]
}

When transpilation is happening, its giving output as an "object" rather than a function or string.

This is output object. Banner: Banner(props) esModule: true __proto: Object

This is causing React to throw an error:

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Transpiled Code :

    'use strict';

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };

define(['exports', 'react'], function (exports, _react) {
  Object.defineProperty(exports, "__esModule", {
    value: true
  });

  var _react2 = _interopRequireDefault(_react);

  function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : {
      default: obj
    };
  }

  function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function");
    }
  }

  var _createClass = function () {
    function defineProperties(target, props) {
      for (var i = 0; i < props.length; i++) {
        var descriptor = props[i];
        descriptor.enumerable = descriptor.enumerable || false;
        descriptor.configurable = true;
        if ("value" in descriptor) descriptor.writable = true;
        Object.defineProperty(target, descriptor.key, descriptor);
      }
    }

    return function (Constructor, protoProps, staticProps) {
      if (protoProps) defineProperties(Constructor.prototype, protoProps);
      if (staticProps) defineProperties(Constructor, staticProps);
      return Constructor;
    };
  }();

  function _possibleConstructorReturn(self, call) {
    if (!self) {
      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
    }

    return call && ((typeof call === 'undefined' ? 'undefined' : _typeof(call)) === "object" || typeof call === "function") ? call : self;
  }

  function _inherits(subClass, superClass) {
    if (typeof superClass !== "function" && superClass !== null) {
      throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
    }

    subClass.prototype = Object.create(superClass && superClass.prototype, {
      constructor: {
        value: subClass,
        enumerable: false,
        writable: true,
        configurable: true
      }
    });
    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
  }

  var HeroBanner = function (_Component) {
    _inherits(HeroBanner, _Component);

    function HeroBanner(props) {
      _classCallCheck(this, HeroBanner);

      var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(HeroBanner).call(this, props));

      _this.createMarkup = _this.createMarkup.bind(_this);
      return _this;
    }

    _createClass(HeroBanner, [{
      key: 'createMarkup',
      value: function createMarkup(val) {
        return {
          __html: val
        };
      }
    }, {
      key: 'render',
      value: function render() {
        var _this2 = this;

        var _props$data = this.props.data;
        var columns = _props$data.columns;
        var content = _props$data.content;
        var containerClass = 'l-col-xs-' + columns.toString() + ' l-col-nopadding' + ' h-border-bottom';
        var storyCardClass = 'storycard storycard-' + content.text_position.toString();
        return _react2.default.createElement('div', {
          className: containerClass
        }, function () {
          if (content.headline_url) {
            return _react2.default.createElement('a', {
              className: storyCardClass,
              href: content.headline_url
            }, content.image && _react2.default.createElement('img', {
              className: 'storycard--image',
              src: content.image.image_path,
              alt: content.image.image_alt_text
            }), _react2.default.createElement('div', {
              className: 'storycard--text'
            }, content.headline && _react2.default.createElement('div', {
              className: 'storycard--headline',
              dangerouslySetInnerHTML: _this2.createMarkup(content.headline)
            }), content.subhead && _react2.default.createElement('div', {
              className: 'storycard--detail',
              dangerouslySetInnerHTML: _this2.createMarkup(content.subhead)
            })));
          }

          return _react2.default.createElement('div', {
            className: 'storycard storycard-<%= contents.text_position %>'
          });
        }());
      }
    }]);

    return HeroBanner;
  }(_react.Component);

  exports.default = HeroBanner;
  HeroBanner.propTypes = {
    content: _react.PropTypes.object,
    columns: _react.PropTypes.string
  };
});

Any help will be appreciated. Let me know if more details are required !!

If you

export default

something in an ES6 module, then in ES5 modules you'd need to access it via .default:

var HeroBanner = require("HeroBannerModule").default;

or similar, in RequireJS,

HeroBanner = HeroBanner.default

See Misunderstanding ES6 Modules, Upgrading Babel, Tears, and a Solution for more information, and see the add-module-exports plugin if you really want to get the old behavior back.