[v4.0.0] Usage of withTheme and redux-connect breaks the code. (or just using of withTheme)

[RIP21]

Environment

System:

• OS: macOS 10.14
• CPU: x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
• Memory: 1.27 GB / 16.00 GB
• Shell: 3.2.57 - /bin/sh

Binaries:

• Node: 10.9.0 - /usr/local/bin/node
• Yarn: 1.12.0 - /usr/local/bin/yarn
• npm: 6.4.1 - /usr/local/bin/npm
• Watchman: 4.9.1 - /usr/local/bin/watchman

npmPackages:

• @types/styled-components: ^4.0.1 => 4.0.1
• styled-components: ^4.0.0 => 4.0.0

Reproduction

Steps to reproduce

1. Have some component that requires withTheme HoC to get theme
2. Try to connect it using redux connect function.

`export const PreviewThemed = withTheme(Preview)

export default connect(
  (state: StateProps) => ({
    isOpenState: state.modal.isOpen,
  }),
  {
    openModal,
    closeModal,
  },
)(PreviewThemed)

Expected Behavior

You get theme and connect is happy too. Everything is working nicely.

Actual Behavior

You've got an error.

You must pass a component to the function returned by connect. Instead received {"displayName":"WithTheme(Preview)"}

Other notes and hints:

It works no problem in version >3.4
I have latest babel plugin, latest CRA 2 with some hacks to add this babel-plugin to it.
As well as the @babel/typescript-preset.
This component is tsx hence written in Typescript and gets compiled down by Babel, not tsc
What can be the issue? I have no idea, but it's clearly connected with bumping to the v4.

[RIP21]

Maybe connected with #2103

[mxstbr]

Can you repro on codesandbox.io? Are you on the latest version of redux and react-redux?

[RIP21]

@mxstbr sry. Too busy now at work. Maybe tmrw. If it will not be moving any forward will repro all the env thanks to codesandbox containers feature.

[sylvhama]

@mxstbr Here a codesandbox: https://codesandbox.io/s/54v5yy621l
It works in v3 but as soon as you upgrade to v4 the issue will appear.

[quantizor]

Maybe react-redux doesn't expect forwardRef-wrapped components?

[cernadasjuan]

Same problem here, I have a component similar to:

const Component = () => <div>Hello world</div>

const StyledComponent = styled(Component)`
//css here
`
const mapStateToProps = () => {}

export default connect(mapStateToProps)(StyledComponent)

And i'm getting the message You must pass a component to the function returned by connect

[quantizor]

This is an issue in react-redux: https://github.com/reduxjs/react-redux/blob/dde1a0a11dbb093f718757409b357cd04c9790e3/src/components/connectAdvanced.js#L90-L94

They need to support forwardRef-wrapped components.

cc @timdorr

[timdorr]

Yep, we know: reduxjs/react-redux#914

[mxstbr]

Closing as there's nothing we can do to fix this.

[sergiulucaci]

5.1.0 is out https://github.com/reduxjs/react-redux/releases/tag/v5.1.0

source