Hydration mismatch only occurs when reloading in the production build.

[ubugeeei]

Describe the bug

Possible similar issues:

• Hydration completed but contains mismatches when linking directly to pages #4099
• testing environment refresh page error. example: framework.gVONBIN7.js:13 Hydration completed but contains mismatches. #4167
• hydration mismatch with default build #3780

---

Hydration mismatch occurs only when reloading a specific page in the production build.
It can be reproduced locally as well.
It doesn’t happen in the development build, nor when navigating through the sidebar.

2024-09-25.20.40.13.mov

Reproduction

This repository (my product)

https://github.com/ubugeeei/reading-vuejs-core-vapor

git clone https://github.com/ubugeeei/reading-vuejs-core-vapor
cd reading-vuejs-core-vapor
ni
DEBUG='*' nr build
DEBUG='*' nr preview

---

※ During the initial build, a fetch to GitHub will run, so it may take a little time.
(From the second time onward, the cache will be used)

The plugin implementation is here.
https://github.com/ubugeeei/reading-vuejs-core-vapor/tree/9fa8c614c6047241dc2a6bdac39dca1815318d6a/.vitepress/plugins/markdown-it/github

Expected behavior

Hydration should complete normally and the screen should render correctly even after reloading.

System Info

System:
    OS: macOS 13.2.1
    CPU: (12) arm64 Apple M2 Max
    Memory: 43.41 GB / 96.00 GB
    Shell: 3.6.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 20.16.0 - ~/.volta/tools/image/node/20.16.0/bin/node
    Yarn: 1.22.22 - ~/.volta/tools/image/yarn/1.22.22/bin/yarn
    npm: 10.8.1 - ~/.volta/tools/image/node/20.16.0/bin/npm
    pnpm: 9.7.1 - ~/.volta/tools/image/pnpm/9.7.1/bin/pnpm
    bun: 1.1.27 - ~/.bun/bin/bun
  Browsers:
    Chrome: 129.0.6668.70
    Safari: 16.3
  npmPackages:
    vitepress: ^1.3.4 => 1.3.4

Additional context

No response

Validations

• Check if you're on the latest VitePress version.
• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

Your plugin seems to be generating div inside p which will break html

<p><a href="https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/ir/index.ts#L22" target="_blank" rel="noreferrer"><div class="github-source">

first point - https://vuejs.org/guide/scaling-up/ssr.html#hydration-mismatch

[ubugeeei]

Oops! I see, I completely missed that.
Thank you, I’ll close it.

[brc-dd]

md.renderer.rules.text thing in your plugin won't work, you'll need to first adjust parser (using something like md.block.ruler.before) to make those links separate block-level tokens.

Might be much easier to do this from a vite plugin rather than a markdown-it one. 👀

[ms264556]

Your plugin seems to be generating div inside p which will break html

I had a similar issue with invalid html 'silently' breaking my interactive pages: #4191

It would be super useful if there was some way of having html errors break the build, so I don't have to run docs:preview then visit every page looking for "hydration completed but contains mismatches" warnings in the console.

[brc-dd]

@ms264556 I'm not sure if there is any easy way to do that. People usually have e2e tests for those kind of things that capture browser warnings and errors for all entries in sitemap. Alternatively if you want only the invalid html related errors, then there is https://html-validate.org/ which is what Nuxt uses in one of their modules.

[ms264556]

People usually have e2e tests for those kind of things that capture browser warnings and errors for all entries in sitemap

Yes, I have this now 😏.

I'd been hoping your SSG had visibility into the hydration process, so that this request would be straightforward.