Warning: Prop src did not match. Server: "x" Client: "y"

[padupuy]

Describe the bug
When I use next.js with react-slick and responsive options, there is a bug during the rehydration phase, the src attribute of the images are mixed between the slides.

The error message is Warning: Prop src did not match. Server: "http://via.placeholder.com/350x150?text=7" Client: "http://via.placeholder.com/350x150?text=8"

To Reproduce
I made an example from examples folder : https://github.com/padupuy/next.js/tree/feature/with-react-slick

The code is right here : https://github.com/padupuy/next.js/blob/feature/with-react-slick/examples/with-react-slick/pages/index.js

Expected behavior
The image sources must not be mixed

Screenshots

System information

• OS: macOS High Sierra 10.13.4
• Browser (if applies) : at least chrome and safari
• Version of Next.js: at least 5.1 and 6.0.2

[kondricz]

same here. Any solutions?

[timneutkens]

This is not an issue with how Next.js works. Rather with how react-slick works and it should be fixed there (better server-side rendering support) since we can't change anything on our side to prevent rehydration errors from external libraries. So I'd suggest creating an issue on the react-slick repository.