SSR does not render a single line comment but DOES render a multiline one, causing a hydration mismatch on the client
Version
3.2.29
Reproduction link
https://github.com/AaronBeaudoin/vite-vue-ssr-bug-repr/tree/multiline-comment
Steps to reproduce
npm i
to install dependencies thennpm run dev
to run.- In your browser go to
http://localhost:3001
. - Assuming you are in Chrome, go to the "Network" tab in Devtools.
- Look at the response for the document. The
#app
element should look like this:<div id="app"><div><!--[--><!--]--></div></div>
- Note that the
<!-- test -->
comment is missing. - In your code editor go to
src/App.vue
. - Add a space in the comment, like for example before
test
like so:<Test> <!-- test --> </Test>
- Reload the browser. Note the hydration mismatch error in the console.
- Check the document response again. The
#app
element should look like this:<div id="app"><div><!--[--><!-- test --><!--]--></div></div>
What is expected?
No hydration mismatch occurs and either one of the two following things happens:
- The single line comment is rendered as well (I'm pretty sure this is what should happen).
- The multiline comment is not rendered.
What is actually happening?
The single line comment does not get rendered in the HTML the server sends to the browser, but the multiline comment does get rendered. This results in a hydration mismatch on the client side when the comment is multiline.