Simple example of hydration error (with repo)

[davestewart]

Describe the bug

I'm trying to document a CSS library, and our docs have lots of embedded HTML examples.

Generally, this works fine, but now and again they nuke the page with:

Hydration completed but contains mismatches.

I've attempted to isolate the mismatch by methodically reducing the HTML, attribute-by-attribute, with the aim of determining what if anything is causing this.

During this process I did find an attribute role="button" which, when removed, rendered the whole page properly.

However, I also found that removing other markdown elements from the page but keeping the role attribute allowed the page to render properly.

I have validated the HTML and it is valid, and along with the rather random behaviour of removing also-valid markdown nuking the page, this feels like a bug in VitePress or Vue – somewhere.

I've created a reproduction and included detailed instructions on the page.

Here also is a GIF showing the issue:

Reproduction

https://stackblitz.com/edit/vite-3kwuru?file=docs%2Fexample.md

Expected behavior

The page should render with both the HTML example and the static markdown in the page.

System Info

System:
    OS: macOS 14.5
    CPU: (12) arm64 Apple M3 Pro
    Memory: 156.36 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.15.1 - /usr/local/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.7.0 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  Browsers:
    Brave Browser: 122.1.63.169
    Chrome: 128.0.6613.120
    Chrome Canary: 130.0.6707.0
    Edge: 128.0.2739.67
    Safari: 17.5
  npmPackages:
    vitepress: ^1.3.4 => 1.3.4

Additional context

I note the new data-allow-mismatch attribute in Vue 3.5:

• https://vuejs.org/api/ssr.html#data-allow-mismatch

It seems that I can make this work in my VitePress repo if I add it in a div in the page:

<div data-allow-mismatch>
This is an intro

<div>Here is an example</div>
</div>

But this isn't really workable.

I tried adding it to the components in my ejected theme, but it didn't work.

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]

Should be fixed now. Can you check again with latest version of vue installed? (You might need to regenerate your lockfile if you haven't specified vue in your deps.)

https://stackblitz.com/edit/vite-ztuuwp?file=package.json

[davestewart]

Great! Seems solid now.

What was the issue?

[brc-dd]

Ah, can't exactly pinpoint, but one of these commits fixed the regression introduced in v3.5 - vuejs/core@v3.5.4...v3.5.5 (most likely vuejs/core@1d99d61)