core Vue SSR hydration error (functional components)

Vue SSR hydration error (functional components)

Open vladeiko opened this issue 2 years ago • 5 comments

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

Dec 07 '22 08:12 vladeiko

Minimal reproduction without tsx.

Dec 07 '22 08:12 zhangzhonghe

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.