Subscribe on changes!

Hydration node mismatch warning will lead to error

avatar
Feb 26th 2024

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: 截屏2024-02-26 17 02 01

Then I try to use the warnHandler to catch the warns, I add: 截屏2024-02-26 17 01 27

But I get the error, not the warn: 截屏2024-02-26 16 44 43

Because in the function warn$1 of vue is: 截屏2024-02-26 17 08 35

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 : 截屏2024-02-23 14 35 53

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: 截屏2024-02-23 14 43 02

I found the question is: 截屏2024-02-23 17 54 45

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 . 307283385-6d1ae555-3cac-489a-85aa-8c73d8cb1d0e

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. 截屏2024-02-23 18 11 08

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

avatar
Feb 26th 2024

talk is cheap. please provide a minimal reproduction

avatar
Feb 26th 2024

talk is cheap. please provide a minimal reproduction

I have update the link, which is a minimal reproduction

avatar
Feb 26th 2024

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

avatar
Feb 26th 2024

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.

avatar
Feb 26th 2024

@renzhen-xiaohongshu uh~ got the point