Stars not rendering in production

[naumanafsar]

I have Vite + React + Typescript application and I am using this react-rating library for displaying ratings in a modal.

Versions: "react": "^18.2.0", "@smastrom/react-rating": "^1.5.0",

It is working as expected in in dev but as soon as I build it, the stars disappears.

Here's what I found:

Svgs in development:

<svg aria-hidden="true" class="rr--svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 58" preserveAspectRatio="xMidYMid meet"><g shape-rendering="geometricPrecision" transform="translate(-2 -3)"><path d="M62 25.154H39.082L32 3l-7.082 22.154H2l18.541 13.693L13.459 61L32 47.309L50.541 61l-7.082-22.152L62 25.154z"></path></g></svg>

The same svg in production: <svg aria-hidden="true" class="rr--svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" preserveAspectRatio="xMidYMid meet"><g shape-rendering="geometricPrecision"><path d="M62 25.154H39.082L32 3l-7.082 22.154H2l18.541 13.693L13.459 61L32 47.309L50.541 61l-7.082-22.152L62 25.154z"></path></g></svg>

I noticed that viewBox is set to "0 0 0 0", if I manually edit the html, I can see my svg icons.

Oh! and I should also mention that the Rating is rendered inside a headlessui modal.

[G-Milevski]

I have the same issue (

@naumanafsar do you have some workaround ?

[piszczu4]

The same on my side with the difference that it does not work in development too, but only on some specific pages (no idea what drives it but the viewBox is 0 0 0 0)

[yankeyhotel]

I'm having the same problem.

[eshimischi]

@smastrom same issue here, any ideas what might be wrong?

[naumanafsar]

@eshimischi The project is dead, look for alternatives.

[shprink]

same using latest

[eshimischi]

The issue is based on incorrect determination of the size of the SVG file if it is loaded in a popup https://github.com/smastrom/react-rating/blob/main/src/RatingItem.tsx#L32 and here https://github.com/smastrom/react-rating/blob/main/src/RatingItem.tsx#L71 i solved it in my project https://github.com/smastrom/react-rating/blob/main/src/RatingItem.tsx#L140 put the real size of svgbox of my Diamond (which i used instead of a Star)