Hydration node mismatch warning will lead to error
Vue version
3.2.47
Link to minimal reproduction
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
talk is cheap. please provide a minimal reproduction
I have update the link, which is a minimal reproduction
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
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.