Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

Environment

System:

OS: macOS 10.14
CPU: x64 Intel® Core™ 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

Have some component that requires withTheme HoC to get theme
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.

Issue Analytics

State:
Created 5 years ago
Reactions:3
Comments:11 (4 by maintainers)

Top GitHub Comments

4reactions

timdorrcommented, Oct 16, 2018

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

3reactions

sergiulucacicommented, Oct 31, 2018

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

source

Top Results From Across the Web

Can styled-components and react-redux connect, withTheme ...

We're attempting to upgrade a codebase from styled-components v3 to v4/5. A pattern we were using no longer seems to work, ...

React Redux connect(): When and how to use it

React provides two major mechanisms for providing data to components, props and state. Props are read-only and allow a parent component to pass ......

use React.forwardRef() Code Example - Grepper

const FancyButton = React.forwardRef((props, ref) => ( {props.children} )); // You can now get a ref directly to the DOM button: const ref...

useSelector vs connect (react-redux) - Sam Dawson

The second is the glue code written by connect() , it glues redux and our inner component together through the use of a...

Connect: Extracting Data with mapStateToProps - React Redux

Usage > mapState: options for reading state with connect. ... It does not matter if a mapStateToProps function is written using the function ......