Skip to content
GitLab
Closed
Issue created by Administrator@rootContributor

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

Created by: 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;
`
  1. 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. image

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? image