Use component with connect() - Cannot read property 'displayName' of undefined
<p>I have a strange problem related to the function ‘connect’ and a presentational component</p>

<pre><code>import React from 'react';
import { withRouter } from 'react-router';
import { connect } from 'react-redux';

import * as optionGroupActions from 'actions/optionGroupActions';
import OptionGroupForm from 'components/optionGroup/OptionGroupForm';

const mapDispatchToProps = (dispatch, ownProps) =&gt; {
  return {
    saveOptionGroup: (optionGroup) =&gt; {
      dispatch(optionGroupActions.fetchSaveOptionGroup(optionGroup));
    },
    onClickCancel: () =&gt; {
      ownProps.router.push('/product/options');
    }
  };
};

const OptionGroupAddContainer = connect(
  null,
  mapDispatchToProps
)(OptionGroupForm);

export default OptionGroupAddContainer;
</code></pre>

<p>This works but if I change the import with this</p>

<pre><code>import { OptionGroupForm } from 'components’;
</code></pre>

<p>I got this error:</p>

<pre><code>connect.js:57Uncaught TypeError: Cannot read property 'displayName' of undefined
</code></pre>

<p>components/index.js looks like</p>

<pre><code>// OptionGroups
import OptionGroupForm from 'components/optionGroup/OptionGroupForm';

export {
  OptionGroupForm
};
</code></pre>