Invalid render with SSR

[addemod]

Hi,

I just upgraded to 2.1.1, which totally messed up the rendering of the masonry view with server-side rendering.

A simple list of images generates the following error: Warning: Prop `src` did not match. Server: "/media/bmebe50w/employee1.png?anchor=center&mode=crop&width=600&height=0&upscale=false&rnd=132526063490330000" Client: "/media/ok0mqkfl/employee2.png?anchor=center&mode=crop&width=600&height=0&upscale=false&rnd=132548434243470000"

With the following code:

const getEmployeeElement = employee => <img src={employee.imageUrl} key={employee.id}></img>

return <ResponsiveMasonry columnsCountBreakPoints={columnBreakpoints}>
    <Masonry gutter="32px" className="employees-list">
        {employees && employees.map(employee => getEmployeeElement(employee))}
    </Masonry>
 </ResponsiveMasonry>

Not just props, it could be anything. Similar issue: Expected server HTML to contain a matching <div> in <div>.

Downgrading to 2.1.0 fixed this issue.

[sebavuye]

I can confirm downgrading to 2.1.0 fixed Expected server HTML to contain a matching <div> in <div>. issue for me as well.

[amillward]

I do not get the error logged, but I am seeing elements within my grid rendering in the incorrect grid elements when using SSR. A client render resolves the problem, as does using version 2.1.0

[cedricdelpoux]

Thank you for reporting this. Between 2.1.0 and 2.1.1, the Responsive component was rewrite using React hooks. I can't reproduce right night but if someone wants to help, PR are always welcome. Thank you

[wottpal]

I have the same problem as described above.

[cedricdelpoux]

Can someone help with a PR? Thank you

[jahirfiquitiva]

I've created a PR to fix this (#57) ... I don't know why travis build is failing, but tests are passing locally

[cedricdelpoux]

Thank you for helping @jahirfiquitiva.

I just published your fix in 2.1.4 version