Subscribe on changes!

Weird SSR hydration error for no good reason

avatar
Sep 9th 2022

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

avatar
Sep 14th 2022

I'd like to challenge the classification of this issue as a "minor" bug, because:

  • Since it's not exactly clear what specific HTML triggers the issue, it's also not clear how to get around it. I'm stuck just trying random changes until I land on something that works, if possible. This totally sucks.
  • If I can't figure out how to get rid of the hydration error, then other real hydration issues in my project are potentially getting hidden behind this one, which also totally sucks.

Bottom line, I don't really have a concrete workaround for this, so it's depressing to be looking at potentially waiting months to see any progress on it.