Search code examples
reactjsreduxreact-reduxinternet-explorer-11babeljs

IE11 React.memo + react-redux connect issue


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"
  ]

Solution

  • 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