Hydration mismatch when components contain non-<p> tag

[visualjerk]

Describe the bug

When using a component that includes a tag other than <p> followed by a component that renders a <p> Tag, the second component gets rendered twice after hydration.

That only happens, when the first component is added in markdown with multiple lines.

Reproduction

Create a blank npm project with vitepress installed.

Create a bar-component.vue:

<template>
  <div>Bar</div>
</template>

Create a foo-component.vue:

<template>
  <p>Foo</p>
</template>

Create a index.md:

<script setup>
import FooComponent from './foo-component.vue'
import BarComponent from './bar-component.vue'
</script>

<BarComponent
  class="test"
/>

<FooComponent />

Run vitepress build && vitepress serve

Expected behavior

• The rendered page should only contain the text "Foo" once.
• No error "Hydration completed but contains mismatches." should be visible in the console

System Info

System:
    OS: macOS 11.5.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 197.49 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.18.2 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.15 - /usr/local/bin/npm
  Browsers:
    Chrome: 104.0.5112.101
    Firefox: 102.0
    Safari: 15.4
  npmPackages:
    vitepress: 1.0.0-alpha.9 => 1.0.0-alpha.9

Additional context

Reproduction example

https://stackblitz.com/edit/vitejs-vite-ivni6v?file=docs/index.md

Workaround

Putting the component in one line in the .md file resolves the issue.

For the example above (index.md):

<script setup>
import FooComponent from './foo-component.vue'
import BarComponent from './bar-component.vue'
</script>

<BarComponent class="test" />

<FooComponent />

Validations

• 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]

@meteorlxy Seems like an issue with the component plugin. In case a component is spread across multiple lines, it's not preventing paragraph wrapping leading to invalid HTML (<p><div>...</div></p>).

[meteorlxy]

That should be covered by the test cases. Let's see what's wrong here. 👀

[meteorlxy]

Fixed by mdit-vue/mdit-vue@53724fa