chenqingspring / vue-lottie

Render After Effects animations on Vue based on Bodymovin
MIT License
1.31k stars 281 forks source link

Error reported under vue3.0 version #57

Open YongHengFu opened 3 years ago

YongHengFu commented 3 years ago

Error reported under vue3.0 version

loading99 commented 3 years ago

What's your exact issue? I do the following, but nothing shows on the web:

</script>
import  * as animationData from "../../../public/path/element14.json";
import Lottie from "lottie-web";
export default defineComponent({
  name:'CyberCity',
  setup(){
    return{
      defaultOptions:{animationData:animationData}
    }
  },
  components: {
    Navigation,
    'lottie':Lottie
  },
})
</script>

In template

  <div style="background-color:#000;
            margin: 0px;
            height: 100%;
            overflow: hidden;">
   <lottie :options="defaultOptions" :height="400" :width="400"/>
  </div>

But I got warnings:

runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Component is missing template or render function. 
  at <Lottie options= {animationData: Module} height=400 width=400 > 
  at <CyberCity onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <Anonymous prefixCls="ant-layout-content" hasSider=undefined tagName="main"  ... > 
  at <ALayoutContent style= {padding: "0 0px"} > 
  at <Anonymous prefixCls="ant-layout" hasSider=undefined tagName="section" > 
  at <ALayout> 
  at <App>
Dids commented 2 years ago

Same here. Having trouble tracking this down, because this triggers on all pages, even on App.vue, which doesn't even use any custom components.

I did update a few dependencies, so this might be version specific or caused by a single incompatible dependency, will need to investigate further.

camerondodds-sv commented 2 years ago

I'm having the exact same problem. Have you found a solution?