"Compare is not a function" when composing React.memo with hocs

[niekert]

Description

Thank you for your work on making react-hot-loader compatible with React 16.7! I've tried upgrading an existing project to 16.7 and the latest version of RHL and ran into an issue.

I've dug into the issue and bit and have found the issue seems to occur when composing a component with React.memo and some other HOCs.

Actual behavior

react-dom throws the Compare is not a function, seemingly because Component.compare is undefined instead of null?

Expected behavior

Hot reloading works as intended

Environment

React Hot Loader version: 4.6.2 with @hot-loader/react-dom alias.
Hot reloading worked fine with version 4.0.0

Reproducible Demo

Here is a reproducible repo: https://github.com/niekert/rhl-context-memo-issue

The issue occurs when I change this line in the React component, though it seems to only occur every other change 🤔

It seems to be also somewhat related to this composed connect and React.memo in this component.

On the branch previous-hmr-version of that repo, react-hot-loader@4.0.0 is installed. The issue does not occur there.

[theKashey]

4.0.0 does not "see" Memo, that's why it working (it's not working at all)

[niekert]

Ah that makes sense. Maybe composing hocs with memo is a bad idea in general?

The hot reloading of a component that uses memo in 4.0.0 does seem to work for me though. What is the difference now that rhl is "aware" of React.memo? :)

[theKashey]

Yep. Not it aware, and doing something not expected with it.
I'll fix the problem today, dont worry.

[theKashey]

So it was broken for any Lazy around Class... as long as it's actually different types.

[theKashey]

4.6.3 (and actually new hot-loader/react-dom or webpack plugin) would solve the issue

[niekert]

Can confirm that it works now 🙏

Thank you for fixing this so quickly!