Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
vijeeth-pro opened this issue Dec 20, 2022 · 12 comments

Comments

@vijeeth-pro
Copy link

vijeeth-pro commented Dec 20, 2022

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
Copy link
Owner

mifi commented Dec 20, 2022

Does it work with 1.5.0?

@mifi
Copy link
Owner

mifi commented Dec 20, 2022

@vijeeth-pro
Copy link
Author

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

@mifi
Copy link
Owner

mifi commented Dec 20, 2022

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
Copy link

hernandemonteiro commented Jan 21, 2023

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

@mifi
Copy link
Owner

mifi commented Jan 21, 2023

what's the error?

@hernandemonteiro
Copy link

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

@mifi
Copy link
Owner

mifi commented Jan 27, 2023

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

@hernandemonteiro
Copy link

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

@mifi
Copy link
Owner

mifi commented Jan 28, 2023

But react lottie player wirh lottie light does not?

@willydavid1
Copy link

I have the same problem
image

@willydavid1
Copy link

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

next@13.0.5

pnpm install next@13.0.5

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants