Lottie-web: params.path.substr is not a function

Created on 31 Jan 2017  路  6Comments  路  Source: airbnb/lottie-web

I am building a React application with webpack and I am loading bodymovin.js through my index.html file and loading it using webpack 2 externals property (This all works fine however...)

When I give my code a run in the browser I get an error from the bodymovin.js file:
params.path.substr is not a function line 7465

Please advise
Thank you!

Most helpful comment

instead of using "path" use "animationData" and pass that object. It should work as well.
No need to revert to a path string.

All 6 comments

are you passing the animation as an object or as a path to a json file?
is it possible that webpack is importing and inlining it?

I am using inside my React component render() {} method:
bodymovin.loadAnimation({
container: document.getElementById('fire'),
animType: 'svg',
loop: true,
prerender: true,
autoplay: true,
path: data
})

and fyi data is a variable declared like so:
import data from './components/data.json';

OMG It all just clicked. Your js needs that path prop to be a string not an imported object. Okay let me see what I can do now.

instead of using "path" use "animationData" and pass that object. It should work as well.
No need to revert to a path string.

Everything works! Thank you so much 馃挴

nice!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

RenanSgorlom picture RenanSgorlom  路  3Comments

cpdt picture cpdt  路  4Comments

Sandok-voc picture Sandok-voc  路  4Comments

yannieyeung picture yannieyeung  路  3Comments

deborabm picture deborabm  路  3Comments