SSR matching of fill url

[pdrbrnd]

Using react-content-loader with SSR (in this case with Next.js) I'm getting the warning:

Warning: Prop `style` did not match. Server: "fill:url(#yu80c54k1c8)" Client: "fill:url(#zhqtwhb70bm)"

Any workaround?

Thanks!

[danilowoz]

Hey, thanks for notifying me... But, it doesn't sound good!

Which version are you using? The lastest? Because recently I changed the approach that I used to generate these ids and... BTW I can't see a solution now because these ids are generated runtime, you know?

@dleitee do you have any idea to solve this?

[danilowoz]

Well, I read a few issues about it on React core and I didn't find any great solution...
I thought to use the key but it isn't able inside the component, then I created the propkey.
I'm not sure if it's an elegant solution, but that's solved!

Look on the #79, let me know what you think.

[dleitee]

Hey @danilowoz, I'll test it here and try to fix it.

[pdrbrnd]

@danilowoz you generate the id at runtime with uid so the only approach I can think of to solve this problem is the one you have at #79

I guess it should work.

Nice job with this package btw 👍

[danilowoz]

Hey @pbrandone
I published a new version with a new prop uniqueKey which you can use like a "key".

Just be careful when you'll update the version because in the lasted version I changed the API

Feedback me if it works :)
Thanks, see ya

[pdrbrnd]

works perfectly @danilowoz. thanks a lot!

[min9nim]

it works!

but uniqueKey not uniquekey @danilowoz

[sedlukha]

@danilowoz how about to use react-id-generator for this issue? This example shows how to reset id on server

[sirKrymov]

Hey @pbrandone
I published a new version with a new prop uniqueKey which you can use like a "key".

Just be careful when you'll update the version because in the lasted version I changed the API

Feedback me if it works :)
Thanks, see ya

It's don't work.