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.