Subscribe on changes!

Vue SSR hydration error (functional components)

avatar
Dec 7th 2022

Vue version

3.2.25

Link to minimal reproduction

https://stackblitz.com/edit/github-zgzicn-7sfwqr?file=src%2FFunctionalComponent.tsx

Steps to reproduce

In SSR mode:

  • Create functional component
  • Return tag with text node and expression inside (e.g. <div>Text node {'expression'}</div>)

What is expected?

No errors/warnings

What is actually happening?

Hydration error

Logs:

[Vue warn]: Hydration text mismatch:
- Client: "Text node expression"
- Server: "Text node " 
  at <Anonymous> 
  at <App>
[Vue warn]: Hydration children mismatch in <div>: server rendered element contains fewer child nodes than client vdom. 
  at <Anonymous> 
  at <App>
Hydration completed but contains mismatches.

System Info

No response

Any additional comments?

No response

avatar
Dec 7th 2022

Minimal reproduction without tsx.

avatar
Dec 8th 2022

It works fine in tests. https://github.com/vuejs/core/blob/6493da5bfa4624267248deb3d31dca2a4fb22aee/packages/server-renderer/__tests__/render.spec.ts#L693-L698

https://github.com/vuejs/core/blob/0e0976168ffbe35152583b30ee311dd5be62205a/packages/server-renderer/src/render.ts#L223-L225 The code here is not executed, resulting in the TextVnode not being rendered on the server side in sfc playground. Similar to https://github.com/vuejs/core/issues/6997. It seems that there are two instances of vue.

avatar
Jan 2nd 2023

@zhangzhonghe I love you

avatar
Aug 15th 2023

Anything new?