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
Comments
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 are you able to explain more/point to documentation on the ancient DOM API that is used, and how styled-components uses it? |
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! 👍 |
@mxstbr is there a way to force the 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 |
@devrelm I'd pretend you were rendering for SSR |
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:
Binaries:
npmPackages:
Reproduction
Styles on client with v3.1.6
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+....
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.
The text was updated successfully, but these errors were encountered: