search

zillow / react-slider

Accessible, CSS agnostic, slider component for React.
https://zillow.github.io/react-slider
MIT License
883 stars 231 forks source link

Hydration failed for server rendered code #271

Closed pekarja5 closed 1 year ago

pekarja5 commented 1 year ago

Description

Hydration fails with: Prop `style` did not match. Server: "position:absolute;left:0;right:0" Client: "position:absolute;will-change:;left:0;right:0"

Server is running Next.js 12.0.5 with React 18 on Node 16 LTS.

The problem is caused by different style resolve for empty strings (server won't include them, but client does) resulting in hydration fail. Using undefined instead of empty strings should unify the results (key should not be present on both - client and sever).

Operations like this are causing the issue: https://github.com/zillow/react-slider/blob/master/src/components/ReactSlider/ReactSlider.jsx#L977

kris-ellery commented 1 year ago

Thanks for submitting an issue @pekarja5!

styled-components are known to have SSR issues with 3rd party libs. Material UI team has to deal with it all the time. Feel free to open PR if it's something you would like to address before we're able to get to it. Thanks!

pekarja5 commented 1 year ago

@kris-ellery Any chance to have #272 merged to fix the issue?

kris-ellery commented 1 year ago

@pekarja5 thank you for contributing! Released in 2.0.4.