smastrom/react-rating

Stars not rendering in production

naumanafsar opened this issue · 3 comments

naumanafsar commented

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 commented

I have the same issue (

@naumanafsar do you have some workaround ?

piszczu4 commented

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 commented

I'm having the same problem.