Subscribe on changes!

SSR does not render a single line comment but DOES render a multiline one, causing a hydration mismatch on the client

avatar
Feb 2nd 2022

Version

3.2.29

Reproduction link

https://github.com/AaronBeaudoin/vite-vue-ssr-bug-repr/tree/multiline-comment

Steps to reproduce

  1. npm i to install dependencies then npm run dev to run.
  2. In your browser go to http://localhost:3001.
  3. Assuming you are in Chrome, go to the "Network" tab in Devtools.
  4. Look at the response for the document. The #app element should look like this:
    <div id="app"><div><!--[--><!--]--></div></div>
    
  5. Note that the <!-- test --> comment is missing.
  6. In your code editor go to src/App.vue.
  7. Add a space in the comment, like for example before test like so:
    <Test>
      <!-- 
        test -->
    </Test>
    
  8. Reload the browser. Note the hydration mismatch error in the console.
  9. 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:

  1. The single line comment is rendered as well (I'm pretty sure this is what should happen).
  2. 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.