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.

Sign up for GitHub

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

Jump to bottom

vue-server-renderer: <hello will cause Server/Client DOM mismatch #6345

Closed
buhrmi opened this issue Aug 11, 2017 · 5 comments
Closed

vue-server-renderer: <hello will cause Server/Client DOM mismatch #6345

buhrmi opened this issue Aug 11, 2017 · 5 comments
Labels
bug

Comments

@buhrmi
Copy link

buhrmi commented Aug 11, 2017

Version

2.4.2

Reproduction link

https://jsfiddle.net/50wL7mdz/52896/

Steps to reproduce

Just make an SSR app using nuxt or something else and put <hello into the template.

What is expected?

No error

What is actually happening?

Console output: [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
@buhrmi buhrmi changed the title vue-server-renderer: &lt; will cause Server/Client DOM mismatch vue-server-renderer: &lt;hello will cause Server/Client DOM mismatch Aug 11, 2017
@posva
Copy link
Member

posva commented Aug 11, 2017

Please follow the Issue Reporting Guidelines and provide a minimal JSFiddle or Github repository containing a set of reproducible steps that can lead to the behaviour you described. Make sure to boil down the problem as much as possible. Thanks!

@buhrmi
Copy link
Author

buhrmi commented Aug 12, 2017

Here is a simple repo using nuxt (other ssr frameworks, eg. ream, have the same issue, so pretty convinced it's a vue-ssr bug)

https://github.com/buhrmi/ssr-bug/

@posva
Copy link
Member

posva commented Aug 12, 2017

It would help if you make it with vanilla Vue, thanks

@buhrmi
Copy link
Author

buhrmi commented Aug 15, 2017

I've nailed this issue down to vue-server-renderer replacing HTML entities in the rendered output. Updated example code here https://github.com/buhrmi/ssr-bug

I don't know why this would be necessary, since browsers do this anyway. Adding &lt;hello will be rendered as an opening tag, which browser will not understand and trigger the client-server dom mismatch warning. I've opened a PR to remove the HTML entity conversion. #6371

@posva posva added bug and removed need repro labels Aug 15, 2017
@posva
Copy link
Member

posva commented Aug 15, 2017

Thanks for the concise repro. Looks like a bug. Thanks for proposing a PR

FranklinTesla pushed a commit to FranklinTesla/vue that referenced this issue Sep 5, 2017
@yyx990803
fix(ssr): should also escape static text content
0a1653a 
fix vuejs#6345
ztlevi pushed a commit to ztlevi/vue that referenced this issue Feb 14, 2018
@yyx990803 @ztlevi
fix(ssr): should also escape static text content
39b3e64 
fix vuejs#6345
f2009 pushed a commit to f2009/vue that referenced this issue Jan 25, 2019
@yyx990803
fix(ssr): should also escape static text content
7af178c 
fix vuejs#6345
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@buhrmi @posva