connect() returns an object

I’m using these libraries:

react: 16.8.6
redux: 4.0.1
react-redux: 7.0.3

I have a simple component (Typescript):

class ExampleComponent extends React.PureComponent<IProps, {}> {
    constructor(props: any) {
        super(props);
    }

    public render() {
        return (
            <div>
                {this.props.name}
            </div>
        );
    }
}

interface IProps{
    name: string;
}

const mapStateToProps = (state) => {
    return {
        name: state.name
    };
}

export default connect(mapStateToProps)(ExampleComponent);

And I have a parent component:

import ExampleComponent from './ExampleComponent';

export default class App extends React.PureComponent<{}, {}> {
    constructor(props: any) {
        super(props);
    }

    public render() {
        return (
            <div>
                <ExampleComponent />
            </div>
        );
    }
}

For some reason the connect(mapStateToProps)(ExampleComponent) returns an object instead of React component. I am getting an error:

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object

Also when I trying to do console.info(typeof connect(mapStateToProps)(ExampleComponent)) it prints object to the console.

How can I solve this issue?

[finom]

Hello guys, I’ve found a solution to make it work with the old react-router and I suppose this should also work other outdated libraries. The solution is just to wrap the returned memorized component with a stateless component which isn’t enhanced by memo:

const NonMemorizedNotFoundErrorPage = props => <NotFoundErrorPage {...props} />;
...
<Route path="/*" component={NonMemorizedNotFoundErrorPage} />

[markerikson]

@finom : no. connect() in React-Redux v7 uses React.memo(), and that’s not changing. In addition, any code that assumes components are only functions has been wrong since React 16.6 came out.

If you’re using an older version of React-Router, you need to either upgrade the router version, or stick with an older version of React-Redux.