Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Weird SSR hydration error for no good reason #6637

Closed
AaronBeaudoin opened this issue Sep 9, 2022 · 2 comments
Closed

Weird SSR hydration error for no good reason #6637

AaronBeaudoin opened this issue Sep 9, 2022 · 2 comments
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. 🐞 bug Something isn't working scope: ssr

Comments

@AaronBeaudoin
Copy link

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

@skirtles-code
Copy link
Contributor

Playground reproduction:

https://sfc.vuejs.org/#__SSR__eNqVkE1OwzAQha9izbqxFdhFphIbOACV2HgT8IBdxT+y3WRRReIQnJCTMA4UEAhoJS/Gb973NHp7uIyRjzuEDmRBF4e+4Fp5xqRpme5L30yGpBHThYLDqGC9MTYzejmwCW3SXArTvoHajn+R1fO/q2UvT8/sOgQtBVmPpM4W6qbYYTiZPV/Y283VJ3SYpPioBlZgXQypNK6PfJuDp+b21azeF1lBxxalalRt/SswpcTcCZEf7mvf28xDehQ08bTzxTrkmF1zl8KUMVGwgtWXDEEindkk9BpTvff3zG/WH7k1dlZ+hvkV5TKwVw==

It seems to be caused by the static node, so the exact point it breaks feels a bit magical because that's the point where there's enough static content to trigger a static node.

@edison1105 edison1105 added 🐞 bug Something isn't working scope: ssr 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels Sep 14, 2022
@AaronBeaudoin
Copy link
Author

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.

chrislone pushed a commit to chrislone/core that referenced this issue Feb 4, 2023
@github-actions github-actions bot locked and limited conversation to collaborators Sep 21, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. 🐞 bug Something isn't working scope: ssr
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants