Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Vue 3 router clash with Bodylight web components #1

Open
TomasKulhanek opened this issue May 3, 2021 · 2 comments
Open

Vue 3 router clash with Bodylight web components #1

TomasKulhanek opened this issue May 3, 2021 · 2 comments

Comments

@TomasKulhanek
Copy link
Member

TomasKulhanek commented May 3, 2021 •
edited
Loading

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 <About onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <App>
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 <About onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <App>
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 <About onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <App>
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 <bdl-fmi>: 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 <About onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView>
@creative-connections creative-connections deleted a comment from kofranek May 3, 2021
@TomasKulhanek
Copy link
Member Author

Submitted query on Stack overflow

@TomasKulhanek
Copy link
Member Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@TomasKulhanek