Vue SSR hydration error (functional components)
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
Minimal reproduction without tsx.
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.