CODEWITHSUNDEEP
vue.jslottie
Nathan Wailes
Nathan Wailes

Reputation: 12222

TypeError: 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:

enter image description here

[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)

Upvotes: 2

Views: 6231

Answers (1)

Nathan Wailes
Nathan Wailes

Reputation: 12222

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>

Upvotes: 7

Related Questions