Warn Hydration completed but contains mismatches. and Custom components are not rendered

[stevending1st]

Describe the bug

When markdown file is added <script>, the custom component does not work properly and an error is reported with the error message Hydration completed but contains mismatches..

Reproduction

Demo repo: https://github.com/stevending1st/vitepress-hydration-bug-report

Here are three markdown files, all of which introduce custom components.

// test-1.md
---
title: ❌
---

<script setup lang="ts">
// hello test
</script>

<TestInfo />

// test-2.md
---
title: ❌
---

<script setup lang="ts">
import { ref } from "vue";
import yaml from "yaml";
import "uno.css";
</script>

<TestInfo />

// test-3.md
---
title: ❌
---

<script setup lang="ts">
const data = 123;
</script>

<TestInfo />

When I execute pnpm dev(vitepress dev website), accessing /test-1, /test-2, /test-3 works fine.

When I execute pnpm build && pnpm preview(vue-tsc && vitepress build website && vitepress preview website), visit /test-1, /test-2, /test-3, my custom component does not work properly and the F12 console reports Hydration completed but contains mismatches..

Expected behavior

When I add the valid <script> and execute vue-tsc && vitepress build website && vitepress preview website, the custom components will display normally and the console will not report an error.

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i5-12500H
    Memory: 1.13 GB / 15.73 GB
  Binaries:
    Node: 16.17.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (109.0.1518.78)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    vitepress: 1.0.0-alpha.32 => 1.0.0-alpha.32

Additional context

No response

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.

[MarkusKeck]

I could reproduce the issue on my system.

It is working if you manually import your component inside your <script> tags or if your <script> tag does not contain setup

//test-1.md
---
title: ❌
---

<script setup lang="ts">
// hello test
import TestInfo from '/.vitepress/theme/components/test-info.vue';
</script>

<TestInfo />

[swpuhu]

I could reproduce the issue on my system.

It is working if you manually import your component inside your <script> tags or if your <script> tag does not contain setup

//test-1.md
---
title: ❌
---

<script setup lang="ts">
// hello test
import TestInfo from '/.vitepress/theme/components/test-info.vue';
</script>

<TestInfo />

The problem seems to be caused by the semicolon at the end of the sentence. I have fixed the bug after removing semicolon.

[swpuhu]

I could reproduce the issue on my system.
It is working if you manually import your component inside your <script> tags or if your <script> tag does not contain setup

//test-1.md
---
title: ❌
---

<script setup lang="ts">
// hello test
import TestInfo from '/.vitepress/theme/components/test-info.vue';
</script>

<TestInfo />

The problem seems to be caused by the semicolon at the end of the sentence. I have fixed the bug after removing semicolon.

Sorry, my fault. I reproduce the bug. The bug cannot be fixed by removing semicolon.

[swpuhu]

Here I come again! I have resolved this bug by registering global component. Don't import components in markdown. I think there is an unknown bug.

[swpuhu]

Also, for insurance purposes, don't use any HTML tag in markdown.

[stevending1st]

Here I come again! I have resolved this bug by registering global component. Don't import components in markdown. I think there is an unknown bug.

Could you show me an example?

[swpuhu]

Here I come again! I have resolved this bug by registering global component. Don't import components in markdown. I think there is an unknown bug.

Could you show me an example?

Remove all code contain "import" in markdown. And registry component in ".vitepress/theme/index.js", the config as below:

import DefaultTheme from 'vitepress/theme';
import SourceCodeExample from '../../scripts/SourceCodeExample.vue';
export default {
    ...DefaultTheme,
    enhanceApp(ctx) {
        DefaultTheme.enhanceApp(ctx);
        // registry global component
        ctx.app.component('SourceCodeExample', SourceCodeExample);
    },
    setup() {},
};

[stevending1st]

Here I come again! I have resolved this bug by registering global component. Don't import components in markdown. I think there is an unknown bug.

Could you show me an example?

Remove all code contain "import" in markdown. And registry component in ".vitepress/theme/index.js", the config as below:

import DefaultTheme from 'vitepress/theme';
import SourceCodeExample from '../../scripts/SourceCodeExample.vue';
export default {
    ...DefaultTheme,
    enhanceApp(ctx) {
        DefaultTheme.enhanceApp(ctx);
        // registry global component
        ctx.app.component('SourceCodeExample', SourceCodeExample);
    },
    setup() {},
};

Thank you very much!