Vue version

3.3.7

Link to minimal reproduction

https://github.com/nuxt/nuxt/issues/23981

Steps to reproduce

case Comment:
            if (He !== 8 || Te)
                if (we.tagName.toLowerCase() === "template") {
                    const Ge = me.el.content.firstChild;
                    Me(Ge, we, ye),
                    me.el = we = Ge,
                    Ue = te(we)
                } else
                    Ue = Se();
            else
                Ue = te(we);
            break;

What is expected?

正常运行

What is actually happening?

case Comment:
            if (He !== 8 || Te)
                if (we.tagName.toLowerCase() === "template") {
                    const Ge = me.el.content.firstChild;
                    Me(Ge, we, ye),
                    me.el = we = Ge,
                    Ue = te(we)
                } else
                    Ue = Se();
            else
                Ue = te(we);
            break;

System Info

No response

Any additional comments?

No response

在3.3.4版本下就不会出现这个问题

simplified demo

No real reproduction from users were provided, so we can only make the best guess.

First of all, this is caused by #8859. Before #8859, this branch is only entered when there is a hydration mismatch where the client vnode is a comment (authored by the user in the template), but the DOM node being hydrated is not a comment.

The error message users cited in https://github.com/nuxt/nuxt/issues/23981 shows Cannot read properties of undefined (reading 'toLowerCase'), which means node exists, but doesn't have a tag name. Under this condition, the only reasonable case is that node is a text node. Indeed I was able to reproduce this error here in a test case, and it's fixed by https://github.com/vuejs/core/commit/dd8a0cf5dcde13d2cbd899262a0e07f16e14e489.

The edge case noted by @edison1105 in #9532 is related, but unlikely to be the actual cause of the issue, as I don't think many users would be manually writing a <!--[--> comment in their templates.

@yyx990803 @sodatea There is actually a reproduction for it here. Although it's quite complex, based on the debugging results, the vnode.el rendered on the client side is indeed a comment node. However, it has also been fixed by https://github.com/vuejs/core/commit/dd8a0cf5dcde13d2cbd899262a0e07f16e14e489. While working on my fix, I discovered that the actual <!--[--> node can be hydrated. But it doesn't seem to be that important(really an edge case). I have closed my PR.