fix(plugin-comment): wrap waline with ClientOnly

vuepress · Jan 15, 2025 · fa70272 · fa70272
1 parent 6584a90
commit fa70272
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 34 deletions.
diff --git a/plugins/blog/plugin-comment/package.json b/plugins/blog/plugin-comment/package.json
@@ -53,7 +53,7 @@
     "vue": "^3.5.13"
   },
   "peerDependencies": {
-    "@waline/client": "^3.4.3",
+    "@waline/client": "^3.5.0",
     "artalk": "^2.9.0",
     "twikoo": "^1.6.39",
     "vuepress": "2.0.0-rc.19"

diff --git a/plugins/blog/plugin-comment/src/client/components/WalineComment.ts b/plugins/blog/plugin-comment/src/client/components/WalineComment.ts
@@ -11,7 +11,7 @@ import {
   nextTick,
   onMounted,
 } from 'vue'
-import { usePageFrontmatter, usePageLang } from 'vuepress/client'
+import { ClientOnly, usePageFrontmatter, usePageLang } from 'vuepress/client'
 import type {
   CommentPluginFrontmatter,
   WalineLocaleData,
@@ -104,15 +104,15 @@ export default defineComponent({
             { id: 'comment', class: 'waline-wrapper' },
             h(
               defineAsyncComponent({
-                loader: async () =>
-                  (
-                    await import(
-                      /* webpackChunkName: "waline" */ '@waline/client/component'
-                    )
-                  ).Waline,
+                loader: async () => {
+                  const { Waline } = await import(
+                    /* webpackChunkName: "waline" */ '@waline/client/component'
+                  )
+
+                  return () => h(ClientOnly, () => h(Waline, walineProps.value))
+                },
                 loadingComponent: LoadingIcon,
               }),
-              walineProps.value,
             ),
           )
         : null

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml