0
1.4K
ViewsTypeError: Cannot read properties of undefined (reading 'length') when using vue-lottie
I'm trying to get a Lottie animation working with Vue by using vue-lottie, and I'm following the example code used in the repo, but when I try to run the code I see the following error in the console:
[Vue warn]: Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'length')"
found in
---> <Lottie> at node_modules/vue-lottie/src/lottie.vue
<VSheet>
<TheThreeColumnLayOut> at src/components/TheThreeColumnLayout.vue
<Dashboard> at src/views/Dashboard.vue
<VMain>
<VApp>
<App> at src/App.vue
<Root>
TypeError: Cannot read properties of undefined (reading 'length')
at completeLayers (lottie.js?94f1:1579)
at Object.completeData (lottie.js?94f1:1968)
at workerStart (lottie.js?94f1:2071)
at Object.postMessage (lottie.js?94f1:1545)
at Object.completeAnimation (lottie.js?94f1:2147)
at AnimationItem.setupAnimation (lottie.js?94f1:12992)
at AnimationItem.setParams (lottie.js?94f1:12970)
at Object.loadAnimation (lottie.js?94f1:12711)
at Object.loadAnimation (lottie.js?94f1:16474)
at VueComponent.mounted (lottie.vue?d421:30)
·
Santiago Trujillo
1 answers
Answer question0
After a lot of Googling, I found a solution described here:
The solution:
Instead of importing the animation data like this (as is shown in the example):
import * as animationData from '../path/to/the/animationData.json'
...instead import it like this:
import animationData from '../path/to/the/animationData.json'
So, a minimal working example of using vue-lottie in your own code would look like this:
<template>
<div>
<Lottie :options="animationOptions" />
</div>
</template>
<script>
import Lottie from 'vue-lottie/src/lottie.vue'
import animationData from '../path/to/your/animation.json'
export default {
components: {
Lottie
},
data: function () {
return {
animationOptions: {
animationData: animationData
}
}
}
}
</script>
·
Santiago Trujillo
Report
Answer question