skip to Main Content

So the problem is all the Lottie animations will load on my local host server, but once the web app is deployed the animation doesnt load and some error comes into the console. The animation files are .json file . My project is next js react project.

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

But when i open my deployment server (which is vercel) the animation fails to load and there are some errors in the console. How do i fix this issue?

Animation is loading in localhost server

Animation is loading in localhost server

This is my folder structure

This is how i have imported the animation json file

This is the error i am getting on the deployment server. The animation is not loading and it is throwing this error

2

Answers


  1. Wherever you pass your animationData, could you try JSON.stringifying it

    JSON.stringify(animationData)
    
    
    Login or Signup to reply.
  2. You are trying it on vercel there is some issue with that please check this github issue and comment https://github.com/vercel/next.js/issues/42801#issuecomment-1317671110, one solution suggest to disable swcMinify

    // next.config.js
    
    module.exports = {
      swcMinify: false,
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search