IE11 React.memo + react-redux connect issue

Question

I am trying to memoize redux-connected component using React.memo. My code works normally in major browsers but IE throws error:

You must pass a component to the function returned by connect. Instead received {"$$typeof":60115,"compare":null}

Component code:

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

const MyComponent = ({ some, prop }) => (
  <div>Some React</div>
);

const MyComponentMemoized = memo(MyComponent);

const mapStateToProps = state => ({
  some: someSelector(state),
  prop: propSelector(state),
});

const MyComponentMemoizedAndConnected = connect(mapStateToProps)(MyComponentMemoized);
export default MyComponentMemoizedAndConnected;

Notes about app setup: using webpack with babel-loader, babel config:

  "presets": [
    [
      "@babel/preset-env",
      {
        corejs: '3.6',
        "targets": {
          "chrome": "58",
          "ie": "11"
        },
        useBuiltIns: 'usage',
      },
    ],
    "@babel/preset-react"
  ]

I found in my search result that this error may occur due to 3 reasons. Circular dependencies between components, Wrong usage of export and export default then imported the wrong way, and Used the connect function wrongly, passed the wrong parameters. You can try to check for it may help to fix the issue. [Helpful article](https://haodong.io/redux-testing-invariant-violation-error) and [Helpful thread](https://stackoverflow.com/questions/42324317/you-must-pass-a-component-to-the-function-returned-by-connect-instead-received) — Deepak-MSFT, Sep 22 '20 at 03:18
@ducmai yep, it works without memo; and just memoized component without connect works also — Max Vorozhcov, Sep 22 '20 at 07:01

score 0 · Accepted Answer · answered Sep 22 '20 at 08:12

0

After hours of debugging I found this bug disappeared after I removed 'react-hot-loader/patch' from my webpack entry arr. Don't know why it happens, but hope it will save someones time

answered Sep 22 '20 at 08:12

Max Vorozhcov

593
1
6
22

Thanks for posting the solution to this issue. I suggest you try to mark your own answer to this question after 48 hrs when it is available to mark. It can help other community members in the future in similar kinds of issues. Thanks for your understanding. – Deepak-MSFT Sep 23 '20 at 05:38

score 0 · Answer 2 · answered Jun 14 '21 at 18:55

0

If anyone run into this issue, check the order you are using memo and connect.

For example, using compose from recompose:

compose(
    React.memo,
    connect(mapStateToProps),
)(MyComponent);

React.memo should be used before connect.

answered Jun 14 '21 at 18:55

WitaloBenicio

3,395
5
25
32

IE11 React.memo + react-redux connect issue

2 Answers2