Pages not rendering full content

[davestewart]

Bug description

It seems that some pages are not rendering the full content, in that only one section (usually the last section on the page) will render, missing out all the content before it.

Reproduction steps

It seems to occur with pages that contain HTML, the buggy-properties of which, I can't exactly nail down.

It is also reproducible in StackBlitz, so I will file a bug with VitePress.

However, it also seems to be intermittent; I have seen it on the final production pages of the docs one day, then other times not.

Strangely, adding any HTML comment to the page tricks VitePress into rendering the page properly, so I will probably add HTML comments to all pages just to make sure that we're not caught out by the intermittent issue.

[davestewart]

VitePress is still not rendering some pages properly:

• media
• bars
• chips
• autocomplete
• color

The error is:

Hydration completed but contains mismatches.

All of these pages have HTML examples.

In the case of previous pages not working (i.e. modal) the solution was to make the markup Vue-compatible, for example, adding Vue event handlers like @click rather than HTML handlers like onclick.

Shall investigate these individual pages and attempt to find a solution.

Related issues on VitePress here:

• https://github.com/vuejs/vitepress/issues?q=sort%3Aupdated-desc+is%3Aissue+hydration

[davestewart]

Have raised a bug here:

• Simple example of hydration error (with repo) vuejs/vitepress#4189

And pushing a PR that wraps these final awkward examples in <ClientOnly>