Hydration completed but contains mismatches

[laterdays]

Describe the bug

It will report errors in production

app.b77605b4.js:1 Hydration completed but contains mismatches

Reproduction

Expected behavior

It will report errors in production

app.b77605b4.js:1 Hydration completed but contains mismatches

System Info

windows

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.

[GOGOGOSIR]

I have the same problem, When I introduce elementplus in vitepress, it packs successfully, but after running docs:serve I get this problem. But I tried docs:dev, and it works fine

vitepress Configuration：

[godxiaoji]

I have the same problem, When I introduce elementplus in vitepress, it packs successfully, but after running docs:serve I get this problem. But I tried docs:dev, and it works fine

It is possible the components of ElementPlus do not support SSR properly. Expand the error cause to see the error source.

[laterdays]

@godxiaoji

[laterdays]

You can only see this information, and you can't see the specific source

[laterdays]

@brc-dd After the addition, the problem persists, i use vitepress-plugin-search & naive-ui

[greenhat616]

@brc-dd After the addition, the problem persists, i use vitepress-plugin-search & naive-ui

The Vitepress-plugin-search will result in this issue.
Related: emersonbottero/vitepress-plugin-search#23

[tolking]

may be related to the teleports

[brc-dd]

The issue might be related to vitepress-plugin-search as some people have mentioned. Not with vitepress itself. We can't tell unless you provide us a minimal reproducible example. If removing the plugin fixes it, then create an issue on it's repo instead.

I'll review #1642 too, but it is less likely to be used by that plugin, using ClientOnly or SafeTeleport might be better choices there.

[tolking]

The reason for the problem is that the Teleport needs special handling during SSR.

Reproduction

• input

<Teleport to="body">
  <p>any content</p>
</Teleport>

• docs-build
• docs-serve
• the error will occur when the relevant page is opened directly (or refresh the page)

Although the ClientOnly components can be used to wrap Teleport, but the relevant content will not be generated in the final page HTML. For SSG, should not it generate more static content?

The PR #1642 provides a way to inject the teleport markup into the correct location in final page HTML.

[haiting]

@brc-dd After the addition, the problem persists, i use vitepress-plugin-search & naive-ui

Is the vitepress-plugin-search plugin working successfully after build:docs on your project ?