Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Vue SSR hydration error (functional components) #7285

@vladeiko

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.🐞 bugSomething isn't workingscope: ssr

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions