I am exporting a component connected with Redux but it does not work, I have no idea why

Question

I created a simple store with a simple reducer. Then I have store = createStore(rootReducer) . Everything is very simple. Now I want just to connect this component like this.

import React from 'react';
import { connect } from 'react-redux';

import Text from './Text';

const User = ({ name, surname }) => (
  <div className='user'>
    <Text name={name} surname={surname} />
  </div>
);

const mapStateToProps = state => {
  return {
    name: state.name,
    surname: state.surname
  };
};

const Connected = connect(mapStateToProps)(User);
export default Connected;

But I keep getting an error:

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

I really have no idea what I am doing wrong. the only thing is that the parent component is like this

<Parent>{this.props.children}</Parent>

Where children would be my connected component. Nothing wrong or new here, but is driving me crazy, any idea? I updated to React: 16.8 and React-redux 7.0

Thanks

Edit: Things are more weird, if I export the component without connect

export default Titles

Then it works!! I have no idea what I do wrong.

If I export simply the component like export default User it works and if I do typeof User I get function. If I export with connect Connected = connect()(User) then it fails and type of Connected is Symbol.react.memo I know is some silly stuff but this is really driving me crazy. Please help! :D

EDIT: Ok, still going crazy xD I see that the component exported with connect()(Comp) does not work but if I use Connected = connect()(Comp) and then in the JSX I do it works! What the ... am I doing wrong?

Answer 1

OK I found the solution and I want to share it with everyone having the same issue. IF you are using redux and export your component with connect()(Comp) you must be aware that the latest version of redux connect uses React.memo and Hooks so you must update all your dependencies.

My issue was that I was using an old version of react-dom and react (not very old tbh), I deleted the node folder and updated all the dependencies to the latest version and now it works normally.

If you want to know the techical reason:

The new connect returns a Object $$typeof: React.memo which is not supported in old version. I found the solution thanks to this post in github .