search

creative-connections / vue3-bdl2-sample-app

Vue 3 Sample project with Bodylight.js-Components.
MIT License
0 stars 2 forks source link

Vue 3 router clash with Bodylight web components #1

Open TomasKulhanek opened 3 years ago

TomasKulhanek commented 3 years ago

When routing to page with Bodylight components in Vue 3, the page is not rendered and console contains these warnings even the isCustomElement is set to ignore custom elements from Bodylight.js-Components.

runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Failed to resolve component: bdl-fmi ``` runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Failed to resolve component: bdl-fmi at ref=Ref< null > > at at warn @ runtime-core.esm-bundler.js?5c40:38 resolveAsset @ runtime-core.esm-bundler.js?5c40:5242 resolveComponent @ runtime-core.esm-bundler.js?5c40:5195 render @ About.vue?f820:12 renderComponentRoot @ runtime-core.esm-bundler.js?5c40:846 componentEffect @ runtime-core.esm-bundler.js?5c40:4280 reactiveEffect @ reactivity.esm-bundler.js?a1e9:42 effect @ reactivity.esm-bundler.js?a1e9:17 setupRenderEffect @ runtime-core.esm-bundler.js?5c40:4263 mountComponent @ runtime-core.esm-bundler.js?5c40:4222 processComponent @ runtime-core.esm-bundler.js?5c40:4182 patch @ runtime-core.esm-bundler.js?5c40:3791 componentEffect @ runtime-core.esm-bundler.js?5c40:4368 reactiveEffect @ reactivity.esm-bundler.js?a1e9:42 callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154 flushJobs @ runtime-core.esm-bundler.js?5c40:384 Promise.then (async) queueFlush @ runtime-core.esm-bundler.js?5c40:286 queueJob @ runtime-core.esm-bundler.js?5c40:280 run @ reactivity.esm-bundler.js?a1e9:183 trigger @ reactivity.esm-bundler.js?a1e9:189 scheduler @ reactivity.esm-bundler.js?a1e9:851 run @ reactivity.esm-bundler.js?a1e9:183 trigger @ reactivity.esm-bundler.js?a1e9:189 scheduler @ reactivity.esm-bundler.js?a1e9:851 run @ reactivity.esm-bundler.js?a1e9:183 trigger @ reactivity.esm-bundler.js?a1e9:189 scheduler @ reactivity.esm-bundler.js?a1e9:851 run @ reactivity.esm-bundler.js?a1e9:183 trigger @ reactivity.esm-bundler.js?a1e9:189 set value @ reactivity.esm-bundler.js?a1e9:761 finalizeNavigation @ vue-router.esm-bundler.js?6c02:3140 eval @ vue-router.esm-bundler.js?6c02:3013 Promise.then (async) pushWithRedirect @ vue-router.esm-bundler.js?6c02:2984 push @ vue-router.esm-bundler.js?6c02:2918 navigate @ vue-router.esm-bundler.js?6c02:2071 callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?5c40:163 invoker @ runtime-dom.esm-bundler.js?830f:333 runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Failed to resolve component: bdl-range at ref=Ref< null > > at at warn @ runtime-core.esm-bundler.js?5c40:38 resolveAsset @ runtime-core.esm-bundler.js?5c40:5242 resolveComponent @ runtime-core.esm-bundler.js?5c40:5195 render @ About.vue?f820:12 renderComponentRoot @ runtime-core.esm-bundler.js?5c40:846 componentEffect @ runtime-core.esm-bundler.js?5c40:4280 reactiveEffect @ reactivity.esm-bundler.js?a1e9:42 effect @ reactivity.esm-bundler.js?a1e9:17 setupRenderEffect @ runtime-core.esm-bundler.js?5c40:4263 mountComponent @ runtime-core.esm-bundler.js?5c40:4222 processComponent @ runtime-core.esm-bundler.js?5c40:4182 patch @ runtime-core.esm-bundler.js?5c40:3791 componentEffect @ runtime-core.esm-bundler.js?5c40:4368 reactiveEffect @ reactivity.esm-bundler.js?a1e9:42 callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154 flushJobs @ runtime-core.esm-bundler.js?5c40:384 Promise.then (async) queueFlush @ runtime-core.esm-bundler.js?5c40:286 queueJob @ runtime-core.esm-bundler.js?5c40:280 run @ reactivity.esm-bundler.js?a1e9:183 trigger @ reactivity.esm-bundler.js?a1e9:189 scheduler @ reactivity.esm-bundler.js?a1e9:851 run @ reactivity.esm-bundler.js?a1e9:183 trigger @ reactivity.esm-bundler.js?a1e9:189 scheduler @ reactivity.esm-bundler.js?a1e9:851 run @ reactivity.esm-bundler.js?a1e9:183 trigger @ reactivity.esm-bundler.js?a1e9:189 scheduler @ reactivity.esm-bundler.js?a1e9:851 run @ reactivity.esm-bundler.js?a1e9:183 trigger @ reactivity.esm-bundler.js?a1e9:189 set value @ reactivity.esm-bundler.js?a1e9:761 finalizeNavigation @ vue-router.esm-bundler.js?6c02:3140 eval @ vue-router.esm-bundler.js?6c02:3013 Promise.then (async) pushWithRedirect @ vue-router.esm-bundler.js?6c02:2984 push @ vue-router.esm-bundler.js?6c02:2918 navigate @ vue-router.esm-bundler.js?6c02:2071 callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?5c40:163 invoker @ runtime-dom.esm-bundler.js?830f:333 runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Failed to resolve component: bdl-chartjs-time at ref=Ref< null > > at at warn @ runtime-core.esm-bundler.js?5c40:38 resolveAsset @ runtime-core.esm-bundler.js?5c40:5242 resolveComponent @ runtime-core.esm-bundler.js?5c40:5195 render @ About.vue?f820:12 renderComponentRoot @ runtime-core.esm-bundler.js?5c40:846 componentEffect @ runtime-core.esm-bundler.js?5c40:4280 reactiveEffect @ reactivity.esm-bundler.js?a1e9:42 effect @ reactivity.esm-bundler.js?a1e9:17 setupRenderEffect @ runtime-core.esm-bundler.js?5c40:4263 mountComponent @ runtime-core.esm-bundler.js?5c40:4222 processComponent @ runtime-core.esm-bundler.js?5c40:4182 patch @ runtime-core.esm-bundler.js?5c40:3791 componentEffect @ runtime-core.esm-bundler.js?5c40:4368 reactiveEffect @ reactivity.esm-bundler.js?a1e9:42 callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154 flushJobs @ runtime-core.esm-bundler.js?5c40:384 Promise.then (async) queueFlush @ runtime-core.esm-bundler.js?5c40:286 queueJob @ runtime-core.esm-bundler.js?5c40:280 run @ reactivity.esm-bundler.js?a1e9:183 trigger @ reactivity.esm-bundler.js?a1e9:189 scheduler @ reactivity.esm-bundler.js?a1e9:851 run @ reactivity.esm-bundler.js?a1e9:183 trigger @ reactivity.esm-bundler.js?a1e9:189 scheduler @ reactivity.esm-bundler.js?a1e9:851 run @ reactivity.esm-bundler.js?a1e9:183 trigger @ reactivity.esm-bundler.js?a1e9:189 scheduler @ reactivity.esm-bundler.js?a1e9:851 run @ reactivity.esm-bundler.js?a1e9:183 trigger @ reactivity.esm-bundler.js?a1e9:189 set value @ reactivity.esm-bundler.js?a1e9:761 finalizeNavigation @ vue-router.esm-bundler.js?6c02:3140 eval @ vue-router.esm-bundler.js?6c02:3013 Promise.then (async) pushWithRedirect @ vue-router.esm-bundler.js?6c02:2984 push @ vue-router.esm-bundler.js?6c02:2918 navigate @ vue-router.esm-bundler.js?6c02:2071 callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?5c40:163 invoker @ runtime-dom.esm-bundler.js?830f:333 runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Failed setting prop "id" on : value idfmi is invalid. TypeError: Cannot read property 'controller' of undefined at HTMLElement.g (aurelia-web-components.js:84) at patchDOMProp (runtime-dom.esm-bundler.js?830f:245) at patchProp (runtime-dom.esm-bundler.js?830f:373) at mountElement (runtime-core.esm-bundler.js?5c40:3905) at processElement (runtime-core.esm-bundler.js?5c40:3868) at patch (runtime-core.esm-bundler.js?5c40:3788) at mountChildren (runtime-core.esm-bundler.js?5c40:3975) at mountElement (runtime-core.esm-bundler.js?5c40:3896) at processElement (runtime-core.esm-bundler.js?5c40:3868) at patch (runtime-core.esm-bundler.js?5c40:3788) at ref=Ref< null > > at ```
TomasKulhanek commented 3 years ago

Submitted query on Stack overflow

TomasKulhanek commented 3 years ago

After applying PR #2 another warning appears indicating that vue runtime tries to interpret the third party custom-element and fails: [Vue warn]: Failed setting prop "id" on <bdl-fmi>: value idfmi is invalid. TypeError: this.au is undefined g aurelia-web-components.js:78 patchDOMProp runtime-dom.esm-bundler.js:458 patchProp runtime-dom.esm-bundler.js:586 mountElement runtime-core.esm-bundler.js:4007

Note development build can be made by npm run serve or with output to dist on ./node_modules/.bin/vue-cli-service build --mode development.