react-lottie-player is not working in production mode but it is working fine in localhost

[vijeeth-pro]

I'm working in next js and I user react-lottie-player. it is working fine in local host but is not working in production mode.. please help me.. here is production link

import React, { useEffect } from "react";
import Lottie from "react-lottie-player";
import LottieImage1 from "../../public/static/1.json";
import LottieImage2 from "../../public/static/2.json";
import LottieImage3 from "../../public/static/3.json";

function AnimationFile({ file }) {
  const [windowScreen, setWindowScreen] = React.useState(0);
  const [responsive, setResponsive] = React.useState(0):
  const [defaultOptions, setDefaultOptions] = React.useState({
    loop: true,
    autoplay: true,
    animationData: LottieImage1,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice",
    },
  });

  useEffect(() => {
    setWindowScreen(window.innerWidth);
    setResponsive(window.innerWidth - 50);
  }, []);

  useEffect(() => {
    if (file === "1") {
      setDefaultOptions((prev) => ({
        ...prev,
        animationData: LottieImage1,
      }));
    } else if (file === "2") {
      setDefaultOptions((prev) => ({
        ...prev,
        animationData: LottieImage2,
      }));
    } else if (file === "3") {
      setDefaultOptions((prev) => ({
        ...prev,
        animationData: LottieImage3,
      }));
    }
  }, [file]);

  return (

    <Lottie
      loop
      animationData={defaultOptions.animationData}
      play
      style={{
        width: windowScreen < 500 ? responsive - 50 : 600,
        height: windowScreen < 500 ? responsive - 50 : 600,
      }}
    />
  );
}

export default  #AnimationFile;

[mifi]

Does it work with 1.5.0?

[mifi]

I think related:

• https://github.com/airbnb/lottie-web/issues/2599
• 1dd835705e5195b152431a9fe4c7c7e0052f9c91

[vijeeth-pro]

I'm using current version "react-lottie-player": "^1.5.0", but it's not working

[mifi]

I think it’s a bug with lottie-web. Can you try to use lottie-web directly and see if you get this problem? Other workaround is to disable minify for lottie-web, or I think use lottie-light instead

[hernandemonteiro]

I have this problem too, i'm using nextJS and in local is fine but in production it breaks

[mifi]

what's the error?

[hernandemonteiro]

the animation hide in production, but in localhost i can see the animation.

[mifi]

does it work with lottie-web? also, try lottie light instead, does that work?

[hernandemonteiro]

yes, lottie-web work... thanks...

[mifi]

But react lottie player wirh lottie light does not?

[willydavid1]

I have the same problem

[willydavid1]

If you are using nextjs you have to update to the next version

next@13.0.5

pnpm install next@13.0.5