styled-components: Client style missing on hydration after SSR (V5)

Environment

## System:
 - OS: macOS High Sierra 10.13.4
 - CPU: (4) x64 Intel(R) Core(TM) i7-6567U CPU @ 3.30GHz
 - Memory: 82.61 MB / 16.00 GB
 - Shell: 3.2.57 - /bin/bash
## Binaries:
 - Node: 8.12.0 - ~/.nvm/versions/node/v8.12.0/bin/node
 - Yarn: 1.6.0 - /usr/local/bin/yarn
 - npm: 6.4.1 - ~/.nvm/versions/node/v8.12.0/bin/npm
 - Watchman: 4.7.0 - /usr/local/bin/watchman
## npmPackages:
 - babel-plugin-styled-components: ^1.10.6 => 1.10.6
 - styled-components: ^5.0.0-beta.9 => 5.0.0-beta.9

Reproduction

Sandbox 1 (expressJS setup) https://codesandbox.io/s/example-server-side-rendering-fsq6v Sandbox 2 (nextJS setup) https://codesandbox.io/s/next-styled-component-v5-style-mismatch-0n0qk

Steps to reproduce

Set up a simple button component with a gradient border.

Expected Behavior

SSR will render the gradient and upon hydration, the client will keep the gradient.

Actual Behavior

SSR will render the gradient and upon hydration, the border styling is removed.

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 42 (24 by maintainers)

Most upvoted comments

Can you unpublish styled-components@5.0.0-regexrehydrate. It’s being recommended as an upgrade over styled-components@5.0.0-rc.2 by renovate.

+4
esetnik on Nov 20, 2019

This is fixed in beta 11, apologies!

+2
quantizor on Oct 21, 2019

5.0.0-regexrehydrate

That’s an old version from before the RCs. Please just use the “beta” tag in your package json.

On Wed, Jan 8, 2020 at 4:01 AM Pierre Bondoerffer notifications@github.com wrote:

Same here using yarn upgrade-interactive:

yarn upgrade-interactive v1.21.1

info Color legend :

“<red>” : Major Update backward-incompatible updates

“<yellow>” : Minor Update backward-compatible features

“<green>” : Patch Update backward-compatible bug fixes ? Choose which packages to update. (Press <space> to select, to toggle all, to invert selection)

dependencies

name range from to url

❯◯ styled-components ^5.0.0-rc.3 5.0.0-rc.3 ❯ 5.0.0-regexrehydrate https://styled-components.com/

— You are receiving this because you modified the open/close state.

Reply to this email directly, view it on GitHub https://github.com/styled-components/styled-components/issues/2812?email_source=notifications&email_token=AAELFVVOIVESA34ZT4JQS5LQ4WI5ZA5CNFSM4JBNMT32YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEILVF5I#issuecomment-571953909, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAELFVQOBIQPCO676HXWIZLQ4WI5ZANCNFSM4JBNMT3Q .

+1
quantizor on Jan 8, 2020

@probablyup as far as I can tell, the branch fixes the issue

+1
rtymchyk on Nov 12, 2019

I’m working on a regex-based fix for this, going to try and get a PR up tonight

+1
quantizor on Nov 7, 2019

@rtymchyk oh rehydration was totally rewritten for v5, that’s part of the reason for our performance gains over v4

+1
quantizor on Nov 5, 2019

More interesting… it’s correct in Safari and Edge, and wrong in Chrome and Firefox… oy vey lol. So it seems there are vendor-specific bugs in the implementation that we’re catching the end of.

cc @kitten

+1
quantizor on Nov 5, 2019

I’ve been digging into this and it appears to be an issue with reading back out of CSSOM. cssRule.cssText doesn’t like that border image syntax for some reason… I’m fiddling around with it.

+1
quantizor on Nov 5, 2019

Ah right, sorry there have been a lot of similar but slightly different issues around this topic and I got confused.

+1
quantizor on Oct 31, 2019

@probablyup I can confirm, that the bug has been fixed for me with v11. Thanks for your work!

+1
floric on Oct 21, 2019
Read more comments on GitHub
← styled-components: Classname ordering problem since 2.1.2
styled-components: Components returned from functions are broken in production  →