Styled Components not working in a Storybook static build?

Describe the bug We have a Storybook 5.3.3 running perfectly fine in dev mode, components utilizing React 16.8.6, Styled Components 4.4 (also tried the new 5.0) and Typescript 3.7 (with ts-loader 6.2.1).

When built for static deployment, things work fine except no styles get injected into the head, so all components are unstyled. Class names are generated fine, and no errors are thrown. Somehow, it appears that SC fails to work within Storybook’s iframe?

To run the build, tried deploying to Surge as well as npx http-server .out per docs, same result 😦

To Reproduce Yet to repro using a bare-bones project setup… Just curious if it’s a known issue?

Expected behavior Styles should be present inside iframe head’s style tag

Screenshots

System:

  System
    OS: macOS 10.15.2
    CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
  Binaries:
    Node: 8.16.1 - ~/.nvm/versions/node/v8.16.1/bin/node
    Yarn: 1.21.1 - ~/Projects/philo-fe/node_modules/.bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v8.16.1/bin/npm
  Browsers:
    Chrome: 79.0.3945.117
    Firefox: 69.0.3
    Safari: 13.0.4
  npmPackages:
    @storybook/addon-a11y: ^5.3.3 => 5.3.3 
    @storybook/addon-actions: ^5.3.3 => 5.3.3 
    @storybook/addon-knobs: ^5.3.3 => 5.3.3 
    @storybook/addon-viewport: ^5.3.3 => 5.3.3 
    @storybook/react: ^5.3.3 => 5.3.3 

[stale[bot]]

Hi everyone! Seems like there hasn’t been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don’t have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[iansan5653]

I was able to work around this by disabling “speedy” mode in styled-components by adding the following to my webpack.config.js for Storybook:

const path = require("path");
const webpack = require("webpack");

module.exports = function({config}) {

  config.plugins.push(
    new webpack.DefinePlugin({
      SC_DISABLE_SPEEDY: true
    })
  );

  return config;
};