fix(runtime-dom): fix anchor loss caused by unmount

[Alfred-Skyblue]

fixed #9071
fixed #8105

core/packages/runtime-core/src/renderer.ts

Line 375 in e33d554

unmount(n1, parentComponent, parentSuspense, true)

Before executing 'unmount,' the 'anchor' was obtained. After 'unmount' completes, it is possible that the 'anchor' has been removed, causing an error when trying to find the 'anchor' during a subsequent 'mount.' This scenario only occurs when the 'anchor' is the last node. Therefore, using 'parent.appendChild(child)' for mounting is recommended.

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	87.2 kB (+21 B)	33.1 kB (+13 B)	29.9 kB (+9 B)
vue.global.prod.js	133 kB (+21 B)	50 kB (+9 B)	44.8 kB (+56 B)

Usages

Name	Size	Gzip	Brotli
createApp	48.4 kB (+23 B)	19 kB (+8 B)	17.4 kB (-49 B)
createSSRApp	51.6 kB (+23 B)	20.3 kB (+10 B)	18.5 kB (+8 B)
defineCustomElement	50.8 kB (+23 B)	19.8 kB (+9 B)	18.1 kB (-27 B)
overall	61.8 kB (+23 B)	23.9 kB (+10 B)	21.7 kB (-3 B)

[Alfred-Skyblue]

If we obtain the anchor after unmount, it may lead to rendering errors with defineAsyncComponent

[baiwusanyu-c]

Please add a unit test

[baiwusanyu-c]

LGTM

[coreyworrell]

Testing this locally after coming across #8105 and the fix doesn't seem to work in my case. I'm still getting an error: Uncaught TypeError: vnode is null with a trace ending at move webpack://site/./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?:6193, which is called by that unmount function you included above.

My app:

<script setup>
import { useFrameStore } from '../stores/frame.js'

const store = useFrameStore()

// store.frameTransition is either 'slide-up' or 'slide-down'
</script>

<template>
    <div>
        <Transition :name="store.frameTransition" mode="out-in" appear>
            <KeepAlive>
                <Suspense>
                    <component :is="store.frame"></component>
                    <template #fallback>
                        <p>Loading...</p>
                    </template>
                </Suspense>
            </KeepAlive>
        </Transition>
    </div>
</template>

<style lang="stylus">
.slide-up-enter-active,
.slide-up-leave-active,
.slide-down-enter-active,
.slide-down-leave-active {
    transition-property: opacity, transform;
    transition-duration: .25s;
    transition-timing-function: cubic-bezier(.7, 0, .265, 1);
}

.slide-up-enter-from,
.slide-up-leave-to,
.slide-down-enter-from,
.slide-down-leave-to {
    opacity: 0;
}

.slide-up-enter-from,
.slide-down-leave-to {
    transform: translateY(5%);
}

.slide-up-leave-to,
.slide-down-enter-from {
    transform: translateY(-5%);
}
</style>

[Alfred-Skyblue]

@coreyworrell Can you put the use case into the Playground to help me better troubleshoot the issue?

[coreyworrell]

@Alfred-Skyblue nevermind, I think my issue was resolved by adding a :key= to the default slot in Suspense.

[edison1105]

This PR seems not the proper fix.

• bugs: teleport component with router push occur error #9071 The root cause is that the teleport node should not be an anchor. I feel if the nextSibling is a teleport node should be skipped in getNextHostNode.
• <Transition> wrapped by <Suspense> breaks entirely if interrupted before it completes #8105 The root cause is that the anchor is unmounted when transition.afterLeave is performing. so just getting the latest anchor will work.

[pikax]

The error is not present but the behaviour is incorrect:
playground

You can see that the Component does not change from A to B

[Alfred-Skyblue]

The error is not present but the behaviour is incorrect: playground

You can see that the Component does not change from A to B

In issue #8105, there is an error behavior where an error occurs when the target node has only one child node. From the perspective of animation behavior, it seems to be waiting for the completion of the nextTick execution to switch, rather than waiting for the animation to complete. I'm not sure if this behavior is expected.

[lk77]

to which vue version we should rollback to to fix this issue ?

[TomasSestak]

when this will get merged? It's making nuxt unusable

[pikax]

@TomasSestak can you confirm if the issue is still present on 3.3.10, my playground example seems to be working as expected with this fix #9309

[Alfred-Skyblue]

I'm not sure if I need to close this PR, but in some cases, acquiring the anchor may, for some reason, lead to its removal, causing a failure in insertBefore. Perhaps we should consider directly inserting the child when there are no child elements in the parentNode. If we believe that parent-child relationship checks should not be performed here, please close this PR.

[codspeed-hq]

CodSpeed Performance Report

Merging #9134 will not alter performance

_{Comparing Alfred-Skyblue:fix-node-insertBefore (1644baf) with main (9fa8241)}

Summary

✅ 53 untouched benchmarks