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

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

Solution 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’;

Comments

[Johnny]

I used to use this import { OptionGroupForm } from 'components’; in my other files... and it works correctly :-/

[Johnny]

I used to use this import { OptionGroupForm } from 'components’; in my other files... and it works correctly

[Md.Estiak Ahmmed]

i have edited my answer check it, you dont have to define path like it when you are in components folder "components/optionGroup/OptionGroupForm". maybe that's why it was showing that error

[Md.Estiak Ahmmed]

you are welcome, can you mark my answer as a right answer if my answer helps you, so that other can get helps from it thanks

[Johnny]

I tried.. I hoped that worked but I have the same problem... When I have updated my index.js, I have still the same problem. Do you have any idea what's wrong?

[Md.Estiak Ahmmed]

on your main file you have imported like below right? import { OptionGroupForm } from 'components’; make sure you have put those curly braces when importing it to the main file

[Johnny]

Yes I tried to use this import { OptionGroupForm } from 'components’; in my component file and I used this import OptionGroupForm from './optionGroup/OptionGroupForm'; export { OptionGroupForm };in the index.js