Hydration node mismatch warning will lead to error

[renzhen-xiaohongshu]

Vue version

3.2.47

Link to minimal reproduction

https://play.vuejs.org/#__SSR__eNqNks1OwzAQhF9l5QutqFL+TiVUAoQEHAAB4oJRZNJtaurYlu00RVXfnXXSlB5QhZSDd2d2M/6SFbu0NllUyEYs9bmTNoDHUNkx17nRPkDpC7gAzsycs64n/ZUztUdHSvi2aKZQSz0xdWswChNlil6hzKdQrzPpkywT1mZZQvJUFkktnL4VeqLQ9bmW0952Y3/FNcC/Junl00rnQRoNvRK9FwUOYFEOIDiRY7sJoEsUJ3sH728VQjx+jOAADmEz1z+P5jXX9KTDFgQhoCJgaZUISBVAasfp7Hi8WjVY1ut0SFU6tGMbx3asbMCC30T+8kYT3iYOZ7kpraT0jzYG95yNYBOUM6GUqe+bXnAVDrp+PsN8/kf/yy9jj7Mnh8RugZxttSBcgaGVb14ecEnnrViaSaXIvUd8RqJWxYyt7apqoO/4mrR3pTUuSF28+ptlQO27S8WgDdPGzxn9Y9d7rv4b9zQ5674FUcwW6OJOAkhCcnLE1j/H+Oll

Steps to reproduce

If you see SSR error, just delete the word and repair it. then you can see the target error.

What is expected?

fix this issue soon

What is actually happening?

In the minimal repo, I use SSR , without the app.config.warnHandler I get the warn:

Then I try to use the warnHandler to catch the warns, I add:

But I get the error, not the warn:

Because in the function warn$1 of vue is:

The warn will print differently because of the warnHanlder. So without warnHandler, it is correct; with warnHandler, it will directly use the args.join('') ,which leads to the error.

In my personal SSR program, SSR will return 40 nodes and the client will adaptively render some of the nodes according to the screen size. So it leads to the warning :

But I cannot fix it because it is not an actually problem, it just a method. So I decided to filter it, so I use warnHandler to filter it. And it just can be config in the client, not in the server. So I code:
if(process.env.BROSWER){ app.config.warnHandler = function (warning, vm, trace) { // filter the problem //.......... console.warn('[Vue warn]: ', warning, vm, trace) } }
Then I run it, I get:

I found the question is:

Because in the function warn, there is a Symbol(Comment) in the args, which can not be implicitly converted to string.
The code is in https://github.com/vuejs/core/blob/main/packages/runtime-core/src/warning.ts .

I think the function can not simply connect the args by join, because type like Symbol could not be implicitly converted to string. Before using join, the args should be converted to string explicitly. So I code it, it actually work.

I hope the issue should be fixed soon, it will really helps me a lot.

System Info

System:
    OS: macOS 14.2
    CPU: (8) arm64 Apple M1
    Memory: 155.42 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm
    pnpm: 8.14.1 - ~/.nvm/versions/node/v18.16.1/bin/pnpm
  Browsers:
    Chrome: 121.0.6167.184
    Safari: 17.2

Any additional comments?

No response

[edison1105]

talk is cheap.
please provide a minimal reproduction

[renzhen-xiaohongshu]

talk is cheap. please provide a minimal reproduction

I have update the link, which is a minimal reproduction

[edison1105]

Paragraphs are block-level elements, and notably will automatically close if another block-level element is parsed before the closing

tag. See "Tag omission" below.

see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p

<p> can have only inline elements as children and no block elements

[renzhen-xiaohongshu]

Paragraphs are block-level elements, and notably will automatically close if another block-level element is parsed before the closing tag. See "Tag omission" below.

see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p

<p> can have only inline elements as children and no block elements

It is just an intentionally caused error. I think the question is, when I get this warn, the warn without warnHandler can correctly print it, but with the warnHandler, it will lead to a new error.If the warn function in vue core is correct, it will print the warn correctly with warnHandler.

[edison1105]

@renzhen-xiaohongshu
uh~
got the point