search

chenqingspring / vue-lottie

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

TypeError: animData.layers is undefined #23

Open mortensassi opened 5 years ago

mortensassi commented 5 years ago

I'm using your demo code and i get this error:

[Vue warn]: Error in mounted hook: "TypeError: animData.layers is undefined"

found in

---> <Lottie> at node_modules/vue-lottie/src/lottie.vue
       <PageFontCharacter> at src/components/PageFontCharacter.vue
         <App> at src/App.vue
           <Root> 

TypeError: "animData.layers is undefined"
    configAnimation webpack-internal:///./node_modules/lottie-web/build/player/lottie.js:5960:5
    configAnimation webpack-internal:///./node_modules/lottie-web/build/player/lottie.js:9077:5
    setParams webpack-internal:///./node_modules/lottie-web/build/player/lottie.js:8944:9
    loadAnimation webpack-internal:///./node_modules/lottie-web/build/player/lottie.js:8728:9
    loadAnimation webpack-internal:///./node_modules/lottie-web/build/player/lottie.js:14154:16
    mounted webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/vue-lottie/src/lottie.vue?vue&type=script&lang=js&:32:17
    callHook webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2916:9
    insert webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4149:7
    invokeInsertHook webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:5944:28
    patch webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:6163:5
    _update webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2665:16
    updateComponent webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2783:7
    get webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3137:13
    run webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3214:17
    flushSchedulerQueue webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2976:5
    nextTick webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1832:9
    flushCallbacks webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1753:14
    run webpack-internal:///./node_modules/core-js/modules/es6.promise.js:75:22
    notify webpack-internal:///./node_modules/core-js/modules/es6.promise.js:92:30
    flush webpack-internal:///./node_modules/core-js/modules/_microtask.js:18:9
jkwchui commented 5 years ago

I confirm same behaviour in a Vuepress setup.

eivindml commented 5 years ago

Same issue here. Anyone figure something out? Might be something related to how the project is served. I get the same error locally, but if I deploy to remote server, and view it on my machine, it works correctly.

Edit: Issue was fixed following this: https://github.com/chenqingspring/vue-lottie/issues/20 Updating animationData to this:

animationData: animationData.default