使用vue-lottie时报TypeError: Cannot read properties of undefined (reading 'length')

问题定位思路 #

这个报错本质是lottie底层解析动画数据时，拿到的图层配置是undefined，核心原因是传入的动画数据不符合预期，按以下步骤排查：

• 先打印你传入lottie组件的animationData值，确认它不是undefined、null，是完整的JSON对象，包含layers、assets等标准lottie动画字段
• 检查lottie组件的挂载时机：如果你的动画数据是异步获取的，组件挂载时数据还没返回，就会触发这个报错
• 确认Vue版本和vue-lottie包的兼容性：原vue-lottie仅支持Vue2，Vue3环境下使用会出现数据解析异常

解决方案 #

• 本地静态动画JSON引入错误修正
  不要使用动态require、不要加解构赋值引入JSON，正确引入方式：

  // 正确写法
  import animationData from '@/assets/xxx-animation.json'
  
  export default {
    data() {
      return {
        lottieOptions: {
          animationData: animationData,
          loop: true,
          autoplay: true
        }
      }
    }
  }
  

• 异步加载动画数据修正
  给lottie组件加v-if判断，等数据加载完成后再渲染组件：

  <lottie 
    v-if="lottieOptions.animationData"
    :options="lottieOptions"
    :height="300"
    :width="300"
  />
  

• Vue3环境兼容修正
  卸载原vue-lottie，安装适配Vue3的版本：

  npm uninstall vue-lottie
  npm install vue3-lottie
  

• 动画文件损坏修正
  重新导出Lottie动画JSON，确认文件完整没有缺失字段。

内容的提问来源于stack exchange，提问作者Nathan Wailes