bug: hydration mismatch

JohnCampionJr commented 1 year ago

Describe the bug

This ones tricky. I think it may be related to #1918

On prod, getting hydration mismatch error on my theme https://github.com/jcamp-code/vitepress-blog-theme

On initial load, the HTML is correct (you see the post excerpt) but it flashes away in milliseconds.

Wondering if it has to do with the v-html:

<p class="mb-5 font-light" v-html="post.excerpt" />

This looks related: https://github.com/vuejs/core/issues/6435

But I did the workaround suggested but it made no difference. It's like excerpt is not getting loaded

Reproduction

Easily seen here: https://deploy-preview-2--vitepress-blog.netlify.app/blog/

Go to it and then reload the page and you'll see the hydration mismatch

https://github.com/jcamp-code/vitepress-blog-theme

Clone it

pnpm serve

Go to: http://localhost:4173/blog/

Loaded directly, you'll see the excerpts are missing. If you go to another page and come back it displays correctly.

Expected behavior

Correct display of page upon hydration

System Info

System:
    OS: macOS 13.3.1
    CPU: (12) arm64 Apple M2 Pro
    Memory: 94.23 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.14.1 - /usr/local/bin/node
    npm: 9.5.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 112.0.5615.137
    Firefox: 111.0.1
    Safari: 16.4
  npmPackages:
    vitepress: 1.0.0-alpha.74 => 1.0.0-alpha.74

Additional context

No response

Validations

[X] Follow our Code of Conduct
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

JohnCampionJr commented 1 year ago

Nope, not a bug. Bad HTML.

was being rendered inside a

which broke things. Once I changed it to a div, all was well. Leaving here in case it helps anyone else.

brc-dd commented 1 year ago

<p> can contain only inline elements. Such issues are easier to find using https://validator.w3.org/#validate_by_input. Just copy-paste generated HTML there.

vuejs / vitepress