Why does my Lottie animation load correctly on the localhost server but not on the deployment server?

Question

So the problem is that all the Lottie animations load on my localhost server, but once the web app is deployed the animations don't load and I get some errors in the console. Animation files are .json files. My project is next js React project.

Link to lottie: https://lottiefiles.com/

But when I open the deployment server (vercel), the animation fails to load and I get some errors in the console. How can I solve this problem?

Answer 1

Wherever you pass animationData, you can try JSON.stringify it

JSON.stringify(animationData)

Answer 2

You are trying on vercel, there are some problems, please check this github issue and leave a comment https://github.com/vercel/next.js/issues/42801#issuecomment-1317671110, one One solution is to disable swcMinify

// next.config.js

module.exports = {
  swcMinify: false,
}