Gissues: Error on mount and unmount with Turbo

guillaumebriday-pa

Nov 30th 2023

Vue version

3.3.9

Link to minimal reproduction

https://github.com/guillaumebriday/rails-vitejs-vue3

Steps to reproduce

I have a Rails application running Hotwire/Turbo and some Vue components on pages. Thanks to Turbo, there is no page reload between pages, but when I tried to unmount and mount my Vue app I got errors.

Basically my js looks like that:

const createMyApp = () => createApp({
  performance: true
})
  .component('DatePicker', defineAsyncComponent(() => import(`@/components/DatePicker.vue`)))
  .component('ColorPicker', defineAsyncComponent(() => import('@/components/ColorPicker.vue')))

let app // I have no idea if I'm supposed to do that, I found nothing in the docs..
document.addEventListener('turbo:load', () => {
  app = createMyApp()

  app.mount('#vue-app')
})

document.addEventListener('turbo:before-visit', () => {
  app.unmount()
})

So when I navigate to a new page, I have these errors in console and the components stop working.

I'm running latest version of Vitejs as well.

Here are my Vue components: https://github.com/guillaumebriday/rails-vitejs-vue3/tree/main/app/javascript/components
Here is the entrypoints: https://github.com/guillaumebriday/rails-vitejs-vue3/blob/main/app/javascript/entrypoints/application.js
Here is how I use it in my views: https://github.com/guillaumebriday/rails-vitejs-vue3/blob/main/app/views/products/index.html.erb#L3

Screenshot of the bug

Screenshot 2023-11-30 at 14 24 42

Video of the bug

I recorded a video showing the bug: https://github.com/vuejs/core/assets/89008587/41a51808-6c5a-459a-badc-a11371eb7ede

What is expected?

It should works as expected like on a fresh page reload

What is actually happening?

It raises lots of incomprehensible errors

System Info

n/a

Any additional comments?

No response

pikax

Dec 1st 2023

Please provide a minimal reproduction, currently there's many pieces, such a UI Library, etc.

From the video the first error seems to be shown because the teleport element does not exist:

Which is more likely to be caused by the UI Library, because it's rendering the Teleport, than Vue itself.

The rest of errors are caused because the Close button from the error teleport cannot close the teleported element (or something like that)

Please reopen or create a new ticket once you have a minimal reproduction without the UI library, ideally also without turbo, because we don't know what turbo is doing to the DOM internally.

LinusBorg

Dec 1st 2023

My suspicion would be that Turbo replaces the content of <body> before everthing has been unmounted, but unfortunately Turbo's down don't really provide a detailed picture of the lifecycle.

guillaumebriday

Dec 1st 2023

Thank you for the feedback, I did new tests and the problem seems to be on the element-plus side

Without it I successfully mount and unmount the vue App

Element-plus does not unmount correctly because of the Teleport stuff, I will dive into it

https://github.com/vuejs/core/assets/8252238/a7dec45f-fef5-404a-9700-84e7f4820b2f