Hydration repeats markdown rendering

[KnorpelSenf]

My site https://grammy.dev uses a lot of inline code snippets. They tend to get longer sometimes, such as reply_to_message_id, or sometimes even URL patterns (not actual links, just explanations for how the URL should be built up). Inline code snippets are treated like single words and cause ugly line wrapping. Especially on mobile, this looks very bad.

Hence, I wrote a small plugin that inserts <wbr> tags in inline code snippets. It transforms them into e.g. reply<wbr>_to<wbr>_message<wbr>_id. As a result, the inline code snippets can be treated like several words without having any spacing, visible or invisible. I do not want to use zero-width spaces because this will impact the Algolia search index (and probably also SEO, not sure). My solution worked well, until I discovered a bug in the page. You can look at it here: https://grammy.dev/guide/basics.html#sending-messages-with-reply

Notice how the little note under the code snippet has parts of the text repeated? This bug:

• does not occur when JS is disabled
• does not occur when using vuepress-vite dev
• does not occur when commenting out this line with a regular expression in my .vuepress/config.ts file (part of my plugin)

It only happens when actually building the site, and then waiting for it to hydrate.

I don't even know if the problem is in my plugin or in VuePress itself, but I suspect I'm doing something wrong.

How is this possible? My plugin code never reaches the browser (right???) so how can it affect the JavaScript there? Why does hydration duplicate nodes in the DOM? Did I cause some weird side-effects that make this happen? I am clueless and thankful for any explanations, be it about internals that could point me in the right direction.

[meteorlxy]

Seems that it's cause by hydration mismatch (or called ssr-mismatch), i.e. the server-rendered result (or after loaded by browser) is different from the client-rendered result.

[KnorpelSenf]

Thank you. This helped me narrow it down. I now know that it's not my own code that fails. I opened #602 which contains a minimal reproduction.