Skip to content

Weird SSR hydration error for no good reason #6637

Closed
@AaronBeaudoin

Description

@AaronBeaudoin

Vue version

3.2.39

Link to minimal reproduction

https://github.com/AaronBeaudoin/weird-vue-hydration-bug

Steps to reproduce

  1. npm install.
  2. npm run dev.
  3. Go to /. Open devtools.
  4. Note the hydration error.
  5. Comment the "WTF" element in src/App.vue on line 6.
  6. Refresh the page.
  7. Note that the hydration error is gone.
  8. WTF.

What is expected?

No hydration errors.

What is actually happening?

runtime-core.esm-bundler.js:38 [Vue warn]: Hydration node mismatch:
- Client vnode: Symbol(Static) 
- Server rendered DOM: <!--[--> (start of fragment) 
  at <App>
warn2 @ runtime-core.esm-bundler.js:38
runtime-core.esm-bundler.js:4593 Hydration completed but contains mismatches.

### System Info

```shell
System:
    OS: macOS 12.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 133.70 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.0 - ~/.volta/tools/image/node/16.17.0/bin/node
    npm: 8.15.0 - ~/.volta/tools/image/node/16.17.0/bin/npm
  Browsers:
    Chrome: 105.0.5195.102
    Safari: 15.6
  npmPackages:
    vue: ^3.2.39 => 3.2.39

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