Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

AaronBeaudoin opened this issue Feb 2, 2022 · 0 comments
feat: ssr 🐞 bug Something isn't working


Copy link



Reproduction link

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 -->
  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.

@LinusBorg LinusBorg added 🐞 bug Something isn't working feat: ssr labels Feb 2, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
feat: ssr 🐞 bug Something isn't working
None yet

No branches or pull requests

2 participants