Open shlaikov opened 5 years ago
I'm having the same problem using Next.js
Me too.
Probably coz of the fillId
: https://github.com/ekeric13/react-star-ratings/blob/master/src/star-ratings.js#L9
These random numbers are also no bueno for creating snapshots... 😢
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.
Any updates on this? :(
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.
Problem resolved with @BodyaNK solution. Thanks
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
I have this issue and I must use SSR. Do you have any solution?
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.
For me doesn't work
import dynamic from "next/dynamic";
const Tab = dynamic(() => import("react-bootstrap"), {
ssr: false,
});
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
I am using next@14.2.3
and encountering the same error.
I tried the pull request implemented by @christophby, it worked as expected in my simple use case.
$ npm install 'git+https://github.com/christophby/react-star-ratings.git#e58364b7b9008e59f22844c26f96cf5d02e61851'
id: string
to the propsSince 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"
/>
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!