Skip to content

[Bug report] shiki-twoslash hydration mismatch #477

Open
@pengzhanbo

Description

@pengzhanbo

Description

The occurrence of shiki-twoslash showing hybration mismatch is due to the inconsistency of popper-id:
Akryum/floating-vue#1006

However, I haven't seen any fix plans for this from floating-vue at the moment. In my theme repository, I made modifications to floating-vue using pnpm patch as a temporary solution.

diff --git a/dist/floating-vue.mjs b/dist/floating-vue.mjs
--- a/dist/floating-vue.mjs
+++ b/dist/floating-vue.mjs
@@ -946,6 +946,7 @@ function mt(e, t, o, i, s, r) {
   const p = P("ResizeObserver");
   return f(), T("div", {
     id: e.popperId,
+    'data-allow-mismatch': '',
     ref: "popover",
     class: J(["v-popper__popper", [
       e.themeClass,
@@ -966,7 +967,7 @@ function mt(e, t, o, i, s, r) {
       position: e.result.strategy,
       transform: `translate3d(${Math.round(e.result.x)}px,${Math.round(e.result.y)}px,0)`
     } : void 0),
-    "aria-hidden": e.shown ? "false" : "true",
+    "aria-hidden": e.shown || e.autoHide ? "false" : "true",
     tabindex: e.autoHide ? 0 : void 0,
     "data-popper-placement": e.result ? e.result.placement : void 0,
     onKeyup: t[2] || (t[2] = je((a) => e.autoHide && e.$emit("hide"), ["esc"]))

Reproduction

Used Package Manager

pnpm

System Info

-

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions