styled-components does not inject styles in head

Created on 28 Nov 2018  路  43Comments  路  Source: styled-components/styled-components

Hello,

As said in the title, I cannot make styled-components work in my project. I am using React with Ruby via the webpacker聽gem if that's of any help. The CSS is not included in my <head>, however it is creating on-fly CSS classes and gives those classes to my element h2 in the below example, but those classes do not have any CSS linked to them.

I am using React 16.6.0 and styled-components 4.1.1.

Environment

System:

  • OS: Linux 4.4 Ubuntu 16.04.5 LTS (Xenial Xerus)
  • CPU: (4) x64 Intel(R) Core(TM) i5-6300HQ CPU @ 2.30GHz
  • Memory: 784.58 MB / 7.63 GB
  • Container: Yes

  • Shell: 4.3.48 - /bin/bash

    Binaries:

  • Node: 8.4.0 - /usr/local/heroku/bin/node

  • Yarn: 1.12.3 - /usr/bin/yarn

  • npm: 6.1.0 - ~/project/.bin/npm

    npmPackages:

  • styled-components: ^4.1.1 => 4.1.1

Reproduction

I do not know how to reproduce this issue, it might be linked to my setup. I spent quite some time on it and still don't know where it's coming from. I basically just yarn add styled-components, added this snippet in my file:

import styled from "styled-components"

const Title = styled.h2`
  font-size: 5.5em;
  text-align: center;
  color: blue;

and used <Title> My Title </Title> instead of my former <h2> My Title </h2> tag

Expected Behavior

My title should get the CSS I defined.

Actual Behavior

My title is inside a <h2> tag with styled-components classes sc-bdVaJa csRtfh but those classes do not have any CSS. No CSS is injected in my head tag. The only injected tag seems to be

<style data-styled="" data-styled-version="4.1.1">
/* sc-component-id: sc-bdVaJa */
</style>
needs more info
Source
picture JrmKrb
👍30

Most helpful comment

Same problem here using a CRA setup.

My dependencies:

"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.2.0",
"styled-components": "^4.4.1",

Downgrading to [email protected] solves the issue for me, but...

The good news is that I found the reason !

I had Loom extension installed (latest version). As soon as I uninstalled it latest version of styled-components worked again.

This is how I found about it:

(look at the request URL)

Screenshot 2019-11-22 at 08 53 33

(look at the url id)

Screenshot 2019-11-22 at 08 52 21

(after uninstalling no content.css file)

Screenshot 2019-11-22 at 08 54 20

So https://github.com/styled-components/styled-components/issues/2254#issuecomment-479740349 was right 馃槃

FYI: I already reported the issue to Loom, hopefully they will fix it following the tips for chrome extension creators above.

picture enzoferey on 21 Nov 2019
❤18 👍14 🚀6

All 43 comments

  • Do the styles show up, i.e. does the h2 have a font-size of 5.5em and a color of blue?
  • Does RoR/webpacker server-side render the React components?
  • Which browser are you using?
mxstbr picture mxstbr on 28 Nov 2018

Hello, thanks for the quick answer!

  • The style does not show up, my h2 element has the classes generated by styled-components but there is no CSS for those classes and thus for my element except the ones coming from my assets (basically only margins, font-size, font-family, font-weight)

  • I do not server-render my components

  • I am using Chromium 70.0.3538.77 but this is the same with Firefox and Safari as the issue is the same on the other computers of my team (mostly Macbook Pros)

JrmKrb picture JrmKrb on 28 Nov 2018
👍12

That's very interesting, and there's no logs in the console whatsoever? Are you running in development or production mode?

mxstbr picture mxstbr on 28 Nov 2018

There aren't any log at all in the console, there does not seem to be any issue. Seems that it's only doing half of the job for a reason. Is there any dependency that could cause this?

I tried also with StyledComponent 3.0.1 but it was the same.
I tried also with other components (span, div, button, a) but it was also the same.

JrmKrb picture JrmKrb on 28 Nov 2018

That's very very strange, I unfortunately do not have a clue what's going on just based on that description. Do you happen to have a repo we could take a look at where this happens?

mxstbr picture mxstbr on 28 Nov 2018

I will try to reproduce it with a simple setup and will get back to you, thanks!

JrmKrb picture JrmKrb on 28 Nov 2018
👍2

Hey Team, love what you've done here. So close to getting my implementation working, and I've kinda hit a wall so maybe someone can help.

I'm seeing a somewhat similar issue here using webpack4 SplitChunks & DllPlugin/DllReferencePlugin for an 'AMD' production implementation. I have managed to externalize the dependencies to be shared by various standalone React apps via the manifest. I've verified that all the styled-component and react dependencies are included in the vendor bundle. The vendor bundle loads, and the app consumes the dependencies. Everything seems to be working correctly except that the