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.

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

Nuxt3 Entry.js tagName.toLowerCase() Error #9531

Closed
jacky-yanglei opened this issue Nov 2, 2023 · 4 comments
Closed

Nuxt3 Entry.js tagName.toLowerCase() Error #9531

jacky-yanglei opened this issue Nov 2, 2023 · 4 comments
Labels
need more info Further information is requested regression scope: ssr

Comments

@jacky-yanglei
Copy link

jacky-yanglei commented Nov 2, 2023

Vue version

3.3.7

Link to minimal reproduction

nuxt/nuxt#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

@jacky-yanglei
Copy link
Author

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

@edison1105
Copy link
Member

edison1105 commented Nov 2, 2023

simplified demo

@edison1105 edison1105 added scope: ssr ❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. regression labels Nov 2, 2023
@sodatea sodatea added need more info Further information is requested and removed ❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. labels Nov 6, 2023
@yyx990803
Copy link
Member

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 nuxt/nuxt#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 dd8a0cf.

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.

@edison1105
Copy link
Member

edison1105 commented Nov 7, 2023

@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 dd8a0cf. 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.
image

@github-actions github-actions bot locked and limited conversation to collaborators Nov 22, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
need more info Further information is requested regression scope: ssr
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants