react-scripts v2.0.4 // styled-components: style not applied with styled(MyComponent)

[sebastienfi]

Is this a bug report?

Yes.

Did you try recovering your dependencies?

Yes.

Which terms did you search for in User Guide?

styled-component

Environment

Environment:
OS: Windows 10
Node: 8.11.4
Yarn: 1.7.0
npm: 6.0.1
Watchman: Not Found
Xcode: N/A
Android Studio: Not Found

Packages: (wanted => installed)
react: ^16.5.2 => 16.5.2
react-dom: ^16.5.2 => 16.5.2
react-scripts: 2.0.4 => 2.0.4

Steps to Reproduce

1. Create a new project using create-react-app.
2. Install the package styled-component@latest.
3. Create a file components.js

import React from 'react'
import styled from 'styled-components';

export const MyComponentRaw = () => <div>This should be red.</div>

export const MyStyledComponent = styled(MyComponentRaw)`
    background-color:red;
    height: 200px;
    width:200px;
`

4. Reference components.js in App.js and import MyStyledComponent, declare use in render. <MyStyledComponent />. It will produce a div with the text, but the background won't be red. With react-scripts v1, the background is red.

Expected Behavior

I was expecting for my app to load, and display the component styled gracefully.

Actual Behavior

The app did not load and produced an error message.
I cannot repro the error message, but at the very least I can repro the styles not applied.

Reproducible Demo

https://github.com/sebastienfi/repro-create-react-app-styled-components

1. Yarn start.
2. The content should be red.

More context

This is the error I get, which I can't repro here.

I am trying to migrate from react-scripts@1.1.5 to react-scripts@2.0.4.
styled-components@latest works like a charm in our react-scripts v1 setup, but breaks on react-scripts v2.
It only breaks on yarn run build && yarn run serve but yarn run start is perfectly fine.
The error imessage links to a component that was working perfectly fine prior to this upgrade.

const ThumbnailImage = styled(MyImageComponent)`
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: 100%;
`

MyImageComponent is a function which execute some logic and return a React component.

Anybody running react-scripts@2.0.4 and styled-components@latest having issues with the styled() function? Any idea what may be the issue here?

It seems that MyImageComponent is not a valid tag. But why?

[gaearon]

But why?

Can you set a breakpoint and check why? What is tag equal to?

[lazyd3v]

We use styled-components in our projects, use the same techniques for styling, but migration from v1 to v2 was done without any problems.

In your demo, I see you don’t pass className prop to div inside MyComponentRaw component. I think that’s why you don’t see red background. See https://www.styled-components.com/docs/basics#styling-any-components

[gaearon]

@faizrr Does the reported behavior difference between dev and prod environments reproduce?

[osdevisnot]

@sebastienfi It seems this is not related to cra v2. Please see this PR on your repro which downgrades cra from 2.0.4 to 1.1.5. Even after downgrade, the MyStyledComponent is not rendered red.

The RCA for this issue is as @faizrr mentioned above. Quoting from styled-components docs:

The styled method works perfectly on all of your own or any third-party components as well, as long as they pass the className prop to their rendered sub-components, which should pass it too, and so on. Ultimately, the className must be passed down the line to an actual DOM node for the styling to take any effect.

Here is a PR that shows this working with cra 2.0.4

NB: @gaearon No difference between dev and prod environments.

[gaearon]

Thanks for checking!