diff --git a/themes/example/components/ExampleRecentComments.js b/themes/example/components/ExampleRecentComments.js
index 32d11463..824246ed 100644
--- a/themes/example/components/ExampleRecentComments.js
+++ b/themes/example/components/ExampleRecentComments.js
@@ -1,7 +1,9 @@
 import React from 'react'
-import { RecentComments } from '@waline/client'
 import BLOG from '@/blog.config'
 import Link from 'next/link'
+import dynamic from 'next/dynamic'
+
+const { RecentComments } = dynamic(() => import('@waline/client'))
 
 /**
  * @see https://waline.js.org/guide/get-started.html
diff --git a/themes/hexo/components/HexoRecentComments.js b/themes/hexo/components/HexoRecentComments.js
index 4977ccf4..8925aa90 100644
--- a/themes/hexo/components/HexoRecentComments.js
+++ b/themes/hexo/components/HexoRecentComments.js
@@ -1,9 +1,11 @@
 import React from 'react'
-import { RecentComments } from '@waline/client'
 import BLOG from '@/blog.config'
 import Card from '@/themes/hexo/components/Card'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
+import dynamic from 'next/dynamic'
+
+const { RecentComments } = dynamic(() => import('@waline/client'))
 
 /**
  * @see https://waline.js.org/guide/get-started.html
diff --git a/themes/next/components/NextRecentComments.js b/themes/next/components/NextRecentComments.js
index 961c3e08..041d8431 100644
--- a/themes/next/components/NextRecentComments.js
+++ b/themes/next/components/NextRecentComments.js
@@ -1,7 +1,9 @@
 import React from 'react'
-import { RecentComments } from '@waline/client'
 import BLOG from '@/blog.config'
 import Link from 'next/link'
+import dynamic from 'next/dynamic'
+
+const { RecentComments } = dynamic(() => import('@waline/client'))
 
 /**
  * @see https://waline.js.org/guide/get-started.html