Invalid render with SSR
See original GitHub issueHi,
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.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:6
- Comments:7 (4 by maintainers)
Top Results From Across the Web
node.js - ERROR Error: invalid Server Side Rendering
I am using this commands to build and run my project in SSR mode. npm run build:ssr && npm run serve:ssr. The build...
Read more >[SSR] Server side rendering - invalid checksum #53 - GitHub
I use this component on a page where I render on the server and then load react on the client. I'm getting this...
Read more >react-hydration-error - Next.js
The first render is called Hydration which is a feature of React. ... Invalid HTML may cause hydration mismatch such as div inside...
Read more >SyntaxError Invalid or unexpected token - How to SSR images ...
I'm using SSR to render a react component which should import an image. ... I get an error "SyntaxError: Invalid or unexpected token"....
Read more >Cory House på Twitter: "To clarify, client-side React allows ...
It's caused by rendering differently on the client vs the server - in this case, due to my invalid markup. A handy safety...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Thank you for helping @jahirfiquitiva.
I just published your fix in
2.1.4
versionI’ve created a PR to fix this (#57) … I don’t know why travis build is failing, but tests are passing locally