Lottie icon works in development but disappears after building with vite

[Jellyyyyyyy]

I am having some issues with using Lottie-react "lottie-react": "^2.4.0". The icon shows up when I run the development environment with vite but when I build it with vite build and then view the page, the lottie icon doesn't show up. No idea if this is a bug or I'm doing it wrong. No errors in the console either. Any help is appreciated. Thanks in advance

This is are snippets of my code:

import Lottie from 'lottie-react';
import uploadCloud from "../assets/uploadCloud.json"

<div className="h-10 w-full">
  <Lottie
    lottieRef={lottieRef}
    animationData={uploadCloud}
    loop={false}
    autoplay={false}
    className='h-16 w-16'
  />
  <span>Click or drag files here to upload</span>
</div>

[arindammitra06]

Does this help? I was facing similar issue. Reference https://stackoverflow.com/questions/75339797/next-js-lottie-cannot-add-property-completed-object-is-not-extensible

import * as animationData from './anim.json'; Replace by: import animationData from './anim.json';

[phil294]

Facing the same issue, except we also get error output:

client-shared.js:2058 TypeError: Cannot read properties of undefined (reading 'useState')
    at useLottie2 (lottie1.js:166:27)
    at Lottie3 (lottie1.js:484:22)
    at Nh (vendor.js:12852:8)

in

React.useState(false)

no idea how this is possible??

That is to say, this is with custom manualChunks logic. Without that, I get

client-shared.js:2058 TypeError: Cannot add property __complete, object is not extensible
    at Object.completeData (vendor.js:41526:42)
    at workerStart (vendor.js:41613:39)
    at Object.postMessage (vendor.js:41060:11)
    at Object.completeAnimation (vendor.js:41679:24)
    at AnimationItem.setupAnimation (vendor.js:42104:19)
    at AnimationItem.setParams (vendor.js:42088:14)
    at Object.loadAnimation2 [as loadAnimation] (vendor.js:42750:18)
    at Object.loadAnimation (vendor.js:44814:31)
    at loadAnimation3 (vendor.js:57087:65)
    at vendor.js:57096:23

in the builds in

                animationData.__complete = true;

And when I make the import a React.lazy(() => import('lottie-react')), I get various

client-shared.js:2058 DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at Wj (https://navi.dev.gn/js/mastertemplate/vendor.js:14503:54)

So I guess it's safe to say this library doesn't work with Vite builds :-/ (React 18.2.0)