Warning: Prop id did not match.

[shlaikov]

Hello, I'm rendering React 16 on client and server(SSR) with new function React.hydrate(). And console throw Warning message:
Warning: Prop id did not match. Server: "starGrad239537257264089" Client: "starGrad357747279155326"

This is the only problem with this component. Thank's a lot!

[zenorocha]

I'm having the same problem using Next.js

[robin-thomas]

Me too.
Probably coz of the fillId: https:/ekeric13/react-star-ratings/blob/master/src/star-ratings.js#L9

[castasamu]

Me too.

react-star-ratings/src/star-ratings.js

Line 9 in 07add0e

fillId = `starGrad${Math.random().toFixed(15).slice(2)}`;

[chungskie]

These random numbers are also no bueno for creating snapshots... 😢

[christophby]

I provided a PR #36 to solve this problem.
You can set an Id to the rating component which makes sure that the fill-Id internally doesn’t change between server & client.

[ForeshadowRU]

Any updates on this? :(

[BodyaNK]

If you're using Next js with server side rendering, you need to import StarRatings from "react-star-ratings" dynamically with no ssr. For example:

import dynamic from "next/dynamic";
const StarRatings = dynamic(() => import("react-star-ratings"), {
  ssr: false,
});

For me it's work. Hope this will help.

[maxgfr]

Problem resolved with @BodyaNK solution. Thanks

[irving-caamal]

If you're using Next js with server side rendering, you need to import StarRatings from "react-star-ratings" dynamically with no ssr. For example:

import dynamic from "next/dynamic";
const StarRatings = dynamic(() => import("react-star-ratings"), {
  ssr: false,
});

For me it's work. Hope this will help.

Just to complement this resolved Issue, I've had to import dynamic child's components when the parent component is dynamic too

[yahya-aghdam]

I have this issue and I must use SSR. Do you have any solution?

[renenielsendk]

If you're using Next js with server side rendering, you need to import StarRatings from "react-star-ratings" dynamically with no ssr. For example:

import dynamic from "next/dynamic";
const StarRatings = dynamic(() => import("react-star-ratings"), {
  ssr: false,
});

For me it's work. Hope this will help.

@BodyaNK How did u get this working? I did it, and the error dissapeared. But now i can't access the properties from the component.

[jeekooo]

For me doesn't work
import dynamic from "next/dynamic";
const Tab = dynamic(() => import("react-bootstrap"), {
ssr: false,
});

[eltel]

For me doesn't work import dynamic from "next/dynamic"; const Tab = dynamic(() => import("react-bootstrap"), { ssr: false, });

Me neither, immensely frustrating - has anybody found a workaround?

Thanks in advance

[sakamossan]

I am using [email protected] and encountering the same error.

I tried the pull request implemented by @christophby, it worked as expected in my simple use case.

• Allow to set id to use non-random fill-id #36

Replacing with his implementation

$ npm install 'git+https:/christophby/react-star-ratings.git#e58364b7b9008e59f22844c26f96cf5d02e61851'

Adding id: string to the props

Since id is not yet defined in @types/react-star-ratings, you'll need to use @ts-expect-error.

<StarRatings
+   // @ts-expect-error
+   id={name.toString()}
    rating={starRate}
    starSpacing="0.1rem"
    starRatedColor="#f5c518"
    starDimension="2rem"
/>