Use component with connect() - Cannot read property 'displayName' of undefined

Question

I have a strange problem related to the function ‘connect’ and a presentational component

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) => {
  return {
    saveOptionGroup: (optionGroup) => {
      dispatch(optionGroupActions.fetchSaveOptionGroup(optionGroup));
    },
    onClickCancel: () => {
      ownProps.router.push('/product/options');
    }
  };
};

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

export default OptionGroupAddContainer;

This works but if I change the import with this

import { OptionGroupForm } from 'components’;

I got this error:

connect.js:57Uncaught TypeError: Cannot read property 'displayName' of undefined

components/index.js looks like

// OptionGroups
import OptionGroupForm from 'components/optionGroup/OptionGroupForm';

export {
  OptionGroupForm
};

Answer 1

if you want to import like below

import { OptionGroupForm } from 'components’;

you have to use resolve in your build process config file to define the path variable,

or you can just import it like below

import { OptionGroupForm } from './components’; 

EDIT: Your components/index.js should look like below

import OptionGroupForm from './optionGroup/OptionGroupForm';

export {
  OptionGroupForm
};

Answer 2

Depending on your build process, you may need to specify your import like this in order to have the source be treated as a relative path rather than an npm module name:

import { OptionGroupForm } from './components’;