styled-components: styled-components does not inject styles in head

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 styled-components@4.2.0 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)

(look at the url id)

(after uninstalling no content.css file)

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.

@pmburov In production we use the CSSOM APIs to inject styles, which are represented differently in dev tools and can be read by accessing the .sheet.cssRules property on the stylesheet DOM node.

This thread has gotten very offtopic so I’m going to close it. If you have an issue with reproduction, please open as a new thread.

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)

I face the same problem and can reproduce it. To reproduce you need a browser extension and a website. Both should use styled-components. Repo for the basic website with styled-components. Published website Screenshot:

I am not providing the source for the extension, but I can make a minimal browser extension example with reproducable bug if necessary.

Btw, building the website with webpack in production mode doesn’t cause an error, because styles are injected in the .js file. The error with styles happens only when webpack is in development mode.

My suggestion is that both website and extension use the same DOM target to inject styles and conflict with each other. That’s why we have empty generated CSS classes.

$ git diff package.json

• “styled-components”: “5.1.0”

• “styled-components”: “4.2.0”

Downgrading to this version solved my problem, need to be another workaround…

I have similar issue. Style tag in the header does not have any content, however components have their styles.

DevTools shows that classes and rules that are applied to elements come from that “ghost” style tag in the header. If I delete style tag in the header using devtools, all styles are gone. So, styling rules are actually there but they are not exposed to DOM?

$0.innerHTML, $0.innerText, $0.textConent tests in console show nothing.

And, by the way, I have this issue in all browsers in production build regardless of Loom extension. Version 4.4.0

Just adding that I had a similar, but not identical issue also resolved by removing the Loom extension. In my case, there was no content in the header style tag, however components did get styled on the initial pageload using webpack-dev-server and hot module reloading.

Changing any styles would strip the styles from the edited component.

I know “+1” comments are generally frowned-upon, however I hope this comment can include some search terms that might help others with my symptoms.

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 <style> in the <head> is empty and none of the rules are being applied. Weird thing is if I do a development build, and or include the source maps it works.

/*html*/
...
<style data-styled="" data-styled-version="4.1.3"></style>
</head>

//  webpack.config for vendor bundle
const config = {
    // devtool:  "eval-source-map",
    entry: {
        "sharedBundles": [
            "react",
            "react-dom",
            "styled-components"
        ]
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            }
        ]
    },
    output: {
        path: path.resolve(__dirname, './vendorBundle/global'),
        filename: "[name].dll.js",
        library: "/file/vendor/vendor.min.js", // needs to be named this way
        libraryTarget: "amd"
    },
    plugins: [
        new webpack.DllPlugin({
            name: '[name]',
            path: './build/library/[name].json'
        })
    ],
    optimization: {
        splitChunks: {
            chunks: 'all',
            maxInitialRequests: Infinity,
            minSize: 0,
            minChunks: 50
        }
    }
};

// webpack.config for app

module.exports = (env, argv)=> {

  // console.log('==>',env, argv)

  return {
    entry: {
      index: "./app/js/index.jsx"
    },
    output: {
      path: path.resolve(
        __dirname, componentConfig.publicPath
      ),
      filename: "bundle.js",
      chunkFilename: "[name].bundle.js",
      publicPath: componentConfig.publicPath,
      libraryTarget: "amd"
    },
    externals: componentConfig.dependencies,
    devServer: {
      hot: true,
      https: true,
      inline: true,
      disableHostCheck: true,
      port: 9000,
      contentBase: path.resolve(
        __dirname, componentConfig.publicPath
      ),
      historyApiFallback: true
    },
    resolve: {
      extensions: [".js", ".jsx", ".json"]
    },
    stats: {
      colors: true,
      reasons: true,
      chunks: true
    },
    plugins: [
      new webpack.DllReferencePlugin({
        context: __dirname,
        manifest: dllManifest,
        name: "/file/vendor/vendor.min.js",
        sourceType: "amd"
      }),
      new webpack.HotModuleReplacementPlugin()
    ],
    module: {
      rules: [
        {
          enforce: "pre",
          test: /\.jsx?$/,
          loader: "eslint-loader",
          exclude: /node_modules/
        },
        {
          test: /\.jsx?$/,
          use: ["babel-loader"]
        }
      ]
    }
  }
};

Unfortunately we are experiencing the same issue as @karataev and others. SSR is working correctly but client rendered styles are not being inserted at all. Any component state changes after SSR on the client results in styles not being inserted (so I am thinking the issue is somewhere around the stylis rule-sheet package). This problem only happens in dev environment, no issues when built and deployed.

sc version: 4.2.0

Other notes

we are using lerna

we use the webpack config alias path.resolve('node_modules/styled-components')

This happens for all styled components even ones created directly in the src (so presumably not a lerna problem)

we use babel-preset-zillow which includes the styled components plugin https://github.com/zillow/javascript/blob/latest/packages/babel-preset-zillow/index.js

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

For me, the jump from 5.1.1 to 5.2.0 breaks it. 5.1.1 works fine, not a single problem. I was lucky to find this thread, not the easiest thing to search for. Thanks @ebarracchia for the hint!

Hey guys, I had this exact problem recently and I realized I had a typo on one of my CSS which broke other CSS and caused them to not function.

This may not work out for you but you can try to find the injected css on the browser (perhaps search by a custom CSS class name) and see if it’s valid CSS.

In my case I had this “@include center-y” from an earlier SASS implementation and it was causing the CSS break.

Hope this helps!

Upgrading to styled-components@4.2.0 resolves this for me. This is used w/ @types/styled-components@4.1.3.

Any higher version of @types/styled-components was causing a typings issue: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/33311

I also tried using styled-components@4.1.2, styled-components@4.1.3, and styled-components@4.1.4, and all of them had the disappearing styles issue (some styles would get injected, and some wouldn’t).

Ok, the problem I’m having was introduced with 4.1.3. 4.1.2 and below work fine.