Lottie-web: Lottie-web fails on react app using create-react-app 2.1.3

Created on 23 Jan 2019 · 3Comments · Source: airbnb/lottie-web

Tell us about your environment
React App using facebook's create-react-app, rendering animations produced by Body-Movin' using lottie-web.

Browser and Browser Version: Chrome Version 71.0.3578.98 (Official Build) (64-bit)
After Effects Version: v16.0.1

What did you do? Please explain the steps you took before you encountered the problem.
Upgraded from create-react-app 1.1.5 to create-react-app 2.1.3. Animation worked on CRA 1.1.5 and fails on CRA 2.1.3.

What did you expect to happen?
lottie-web continue to render Lottie animations like it did in create-react-app 1.1.5.

What actually happened? Please include as much _relevant_ detail as possible.
Errors: lottie.js:6938 Uncaught TypeError: Cannot read property 'length' of undefined
at SVGRenderer.configAnimation (lottie.js:6938)
at AnimationItem.configAnimation (lottie.js:13086)
at AnimationItem.setParams (lottie.js:12936)
at Object.loadAnimation (lottie.js:12697)
at Object.loadAnimation (lottie.js:16296)
at Lottie. (Lottie.js:77)
at executeAction$$1 (mobx.module.js:680)
at Lottie.res (mobx.module.js:668)
at Lottie.js:12

Please provide a download link to the After Effects file that demonstrates the problem.
The body-movin file is good. Seems to be some new incompatibility issue with lottie-web, create-react-app and how it processes SVG/json files.

Source

leantide

Most helpful comment

I just found a solution. Under CRA 1.1.5 I could import the animation like this:

import * as MyAnimation from './MyAnimation.json'

But under CRA 2.1.3, this syntax now uses an svgr webpack loader to package the SVG as a react component, which seems to break lottie-web processing the json. (https://github.com/facebook/create-react-app/pull/3718)

But if I load using webpack require, or using:

import MyAnimation from './MyAnimation.json'

then lottie-web works fine under CRA 2.1.3.

Go figure.

leantide on 23 Jan 2019

👍4 ❤2 🎉1