chenqingspring/vue-lottie

TypeError: animData.layers is undefined

Opened this issue · 2 comments

mortensassi commented

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

I confirm same behaviour in a Vuepress setup.

eivindml commented

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: #20
Updating animationData to this:

animationData: animationData.default
  • 👍4