[Teleport] - Updating component inside Teleport causes HMR to crash

[nunoraposo33]

Vue version

3.5.13

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-grzg8vpe?file=src%2FApp.vue

Steps to reproduce

In App.vue update the slot content to anything else.
Also happens if you change the "Modal.vue", as an example change the class "modal__dialogs" to "modal_potatos".

In the browser's console it shows:
TypeError: Cannot set properties of null (setting '__vnode')

It's related to reactivity inside the component Modal.vue, in the computed "modalClasses", remove the reference to the ref "isVisible" and the error will not happen, or if the value of "isVisible" is set as "true" (line 16).

// Not sure if the title is accurate

What is expected?

I expect the modal component's hot reload to work normally.

What is actually happening?

Hot reload stops working after the error, need to refresh the page.

System Info

Using the stackblitz stack.

Any additional comments?

No response

[nunoraposo33]

Thank you, as a temporary workarround you can just create a wrapper arround <Teleport>

// TeleportWrapper.vue

<script setup lang="ts"> 
import { computed } from "vue" 
 
const props = defineProps<{ 
    to: string | HTMLElement | null 
    disabled?: boolean 
}>() 
 
const teleportTarget = computed(() => (props.to ?? "body")) 
</script> 
<template> 
<teleport :to="teleportTarget"> 
  <slot /> 
</teleport> 
</template> 

And use <TeleportWrapper> instead of <Teleport>