Gamote / lottie-react

A lightweight React library for rendering complex After Effects animations in real time using Lottie.
https://lottiereact.com
Other
795 stars 58 forks source link

Error: <path> attribute d: Expected moveto path command ('M' or 'm') #78

Closed cpellet closed 2 years ago

cpellet commented 2 years ago

Describe the bug Lottie animations do not display properly, console gives the following error: Error: <path> attribute d: Expected moveto path command ('M' or 'm')

To Reproduce Steps to reproduce the behavior: Attempt to display the linked lottie animation as follows: <Lottie autoplay loop animationData={Angry} rendererSettings={{preserveAspectRatio: 'xMidYMid slice'}}/>

Expected behavior The animation shows well in localhost development environment, but fails to load in production.

Screenshots Only tiny parts of the animation are loaded: image Whereas it is supposed to look like this (on localhost): image

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context

SVGShapeElement.renderInnerContent | @ | ea88be26-9bdc0959c76d7334.js:1
-- | -- | --
  | renderFrame | @ | ea88be26-9bdc0959c76d7334.js:1
  | SVGRendererBase.renderFrame | @ | ea88be26-9bdc0959c76d7334.js:1
  | AnimationItem.renderFrame | @ | ea88be26-9bdc0959c76d7334.js:1
  | AnimationItem.gotoFrame | @ | ea88be26-9bdc0959c76d7334.js:1
  | AnimationItem.setCurrentRawFrameValue | @ | ea88be26-9bdc0959c76d7334.js:1
  | AnimationItem.advanceTime | @ | ea88be26-9bdc0959c76d7334.js:1

angry.zip

mSauvestre commented 2 years ago

Same issue here. For some reason, I also only get the issue when pushing to prod (Vercel) but not on localhost: https://mythic-trap.vercel.app/vault/eranog

Animation is missing elements because of this for me too.

cpellet commented 2 years ago

Same issue here. For some reason, I also only get the issue when pushing to prod (Vercel) but not on localhost: https://mythic-trap.vercel.app/vault/eranog

Animation is missing elements because of this for me too.

I actually found a fix, this seems to be Vercel's issue, see here: https://github.com/vercel/next.js/issues/42801. I will close this issue here.