Vue SSR hydration error (functional components)

[vladeiko]

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

[zhangzhonghe]

Minimal reproduction without tsx.

[edison1105]

It works fine in tests.

core/packages/server-renderer/__tests__/render.spec.ts

Lines 693 to 698 in 6493da5

	test('Text', async () => {
	expect(await render(createTextVNode('hello <div>'))).toBe(
	`hello &lt;div&gt;`
	)
	})

core/packages/server-renderer/src/render.ts

Lines 223 to 225 in 0e09761

	case Text:
	push(escapeHtml(children as string))
	break

The code here is not executed, resulting in the TextVnode not being rendered on the server side in sfc playground. Similar to #6997. It seems that there are two instances of vue.

[yapengsoft]

@zhangzhonghe I love you

[Ives7]

Anything new?