John John - 3 months ago 153
React JSX Question

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

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

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
};