react-lottie-player is not working in production mode but it is working fine in localhost #87
Description
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;