Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Broken client-side rehydration when a bundle includes unused imports on versions 3.2.0+ #1915

Closed
jtart opened this issue Aug 13, 2018 · 5 comments

Comments

@jtart
Copy link

jtart commented Aug 13, 2018

Client-side re-hydration of a stylesheet breaks when using styled-components v.3.2.0 or greater. It only breaks on a production environment. I have narrowed it down to it being the speedy tag that is created. If speedy is disabled and makeBrowserTag is used, it works fine.

Environment

System:

  • OS: OS X El Capitan 10.11.6
  • CPU: x64 Intel(R) Core(TM) i5-6500 CPU @ 3.20GHz
  • Memory: 4.10 GB / 16.00 GB
  • Shell: 5.0.8 - /usr/local/bin/zsh

Binaries:

  • Node: 8.11.2 - ~/.nvm/versions/node/v8.11.2/bin/node
  • npm: 6.3.0 - ~/.nvm/versions/node/v8.11.2/bin/npm

npmPackages:

  • styled-components: ^3.2.0 => 3.2.0

Reproduction

image
Styles on client with v3.1.6

image
Styles on client with v.3.2.0+, note the empty style tag.

Steps to reproduce

In an app that uses styled-components 3.2.0+....

  1. Import some unused components in a universal React app, that server-side renders some styled-components
  2. Server-side render a HTML doc that includes some styled components
  3. Note that the HTML doc will include the styles before the client-side hydration runs
  4. Note that when client-side hydration runs, the styled-component styles tag is empty

See this issue in our codebase: bbc/simorgh#381.

Expected Behavior

The styled-component styles tag should include the application styles.

Actual Behavior

The styled-component styles tag is empty.

Note

v3.1.6 works fine so can pin to that, which is fine for a temporary fix. Furthermore, I see there is a potential config to disable speedy tag in production in v4 which would be a better temporary fix.

@mxstbr
Copy link
Member

mxstbr commented Aug 13, 2018

Styles on client with v.3.2.0+, note the empty style tag.

The tag is always empty, but are the styles still there? Our speedy injection uses an ancient DOM API to insert the rules directly, so they will never show up in the HTML. If the page is styled then it's working!

@mxstbr mxstbr closed this as completed Aug 13, 2018
@jtart
Copy link
Author

jtart commented Aug 13, 2018

@mxstbr are you able to explain more/point to documentation on the ancient DOM API that is used, and how styled-components uses it?

@mxstbr
Copy link
Member

mxstbr commented Aug 13, 2018

Here you go: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule

Basically as long as your page is still styled, rehydration is working as expected! 👍

@devrelm
Copy link
Contributor

devrelm commented Aug 16, 2018

@mxstbr is there a way to force the style tag to be populated on-the-fly?

We're using Percy which takes a DOM snapshot as html, uploads it to their server, and rehydrates that to take an actual screenshot in their custom browser. Since we're uploading an empty <style> tag, their rehydrated page has no styles, and the screenshot looks like a css file 404'd.

@quantizor
Copy link
Contributor

@devrelm I'd pretend you were rendering for SSR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants