diff --git a/packages/frontend/component/package.json b/packages/frontend/component/package.json
index 24562700c6..4ebc8e2a1c 100644
--- a/packages/frontend/component/package.json
+++ b/packages/frontend/component/package.json
@@ -66,7 +66,7 @@
     "react-paginate": "^8.2.0",
     "react-router-dom": "^6.22.1",
     "react-transition-state": "^2.1.1",
-    "react-virtuoso": "~4.6.3",
+    "react-virtuoso": "^4.7.0",
     "rxjs": "^7.8.1",
     "swr": "^2.2.5",
     "uuid": "^9.0.1"
diff --git a/packages/frontend/core/package.json b/packages/frontend/core/package.json
index ff34f70fc2..96abdc46f3 100644
--- a/packages/frontend/core/package.json
+++ b/packages/frontend/core/package.json
@@ -40,6 +40,7 @@
     "@emotion/react": "^11.11.3",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
+    "@juggle/resize-observer": "^3.4.0",
     "@marsidev/react-turnstile": "^0.5.3",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.5",
@@ -86,7 +87,7 @@
     "react-is": "18.2.0",
     "react-router-dom": "^6.22.1",
     "react-transition-state": "^2.1.1",
-    "react-virtuoso": "~4.6.3",
+    "react-virtuoso": "^4.7.0",
     "rxjs": "^7.8.1",
     "ses": "^1.3.0",
     "swr": "2.2.5",
diff --git a/packages/frontend/core/src/index.tsx b/packages/frontend/core/src/index.tsx
index 1a1e95584b..413dfe6513 100644
--- a/packages/frontend/core/src/index.tsx
+++ b/packages/frontend/core/src/index.tsx
@@ -1,5 +1,6 @@
 import './polyfill/intl-segmenter';
 import './polyfill/request-idle-callback';
+import './polyfill/resize-observer';
 
 import { assertExists } from '@blocksuite/global/utils';
 import { StrictMode } from 'react';
diff --git a/packages/frontend/core/src/polyfill/resize-observer.ts b/packages/frontend/core/src/polyfill/resize-observer.ts
new file mode 100644
index 0000000000..1c543dcdfb
--- /dev/null
+++ b/packages/frontend/core/src/polyfill/resize-observer.ts
@@ -0,0 +1,8 @@
+import { ResizeObserver } from '@juggle/resize-observer';
+
+// prevents the following error in development mode:
+// ResizeOvserver loop limit exceeded
+// https://github.com/petyosi/react-virtuoso/issues/875#issuecomment-1962897033
+if (process.env.NODE_ENV !== 'production') {
+  window.ResizeObserver = ResizeObserver;
+}
diff --git a/yarn.lock b/yarn.lock
index eac8622cee..c40abab986 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -270,7 +270,7 @@ __metadata:
     react-paginate: "npm:^8.2.0"
     react-router-dom: "npm:^6.22.1"
     react-transition-state: "npm:^2.1.1"
-    react-virtuoso: "npm:~4.6.3"
+    react-virtuoso: "npm:^4.7.0"
     rxjs: "npm:^7.8.1"
     storybook: "npm:^7.6.17"
     storybook-dark-mode: "npm:^3.0.3"
@@ -318,6 +318,7 @@ __metadata:
     "@emotion/react": "npm:^11.11.3"
     "@emotion/server": "npm:^11.11.0"
     "@emotion/styled": "npm:^11.11.0"
+    "@juggle/resize-observer": "npm:^3.4.0"
     "@marsidev/react-turnstile": "npm:^0.5.3"
     "@perfsee/webpack": "npm:^1.12.2"
     "@pmmmwh/react-refresh-webpack-plugin": "npm:^0.5.11"
@@ -383,7 +384,7 @@ __metadata:
     react-is: "npm:18.2.0"
     react-router-dom: "npm:^6.22.1"
     react-transition-state: "npm:^2.1.1"
-    react-virtuoso: "npm:~4.6.3"
+    react-virtuoso: "npm:^4.7.0"
     rxjs: "npm:^7.8.1"
     ses: "npm:^1.3.0"
     source-map-loader: "npm:^5.0.0"
@@ -6766,7 +6767,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@juggle/resize-observer@npm:^3.3.1":
+"@juggle/resize-observer@npm:^3.3.1, @juggle/resize-observer@npm:^3.4.0":
   version: 3.4.0
   resolution: "@juggle/resize-observer@npm:3.4.0"
   checksum: 10/73d1d00ee9132fb6f0aea0531940a6b93603e935590bd450fc6285a328d906102eeeb95dea77b2edac0e779031a9708aa8c82502bd298ee4dd26e7dff48f397a
@@ -30831,13 +30832,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-virtuoso@npm:~4.6.3":
-  version: 4.6.3
-  resolution: "react-virtuoso@npm:4.6.3"
+"react-virtuoso@npm:^4.7.0":
+  version: 4.7.1
+  resolution: "react-virtuoso@npm:4.7.1"
   peerDependencies:
     react: ">=16 || >=17 || >= 18"
     react-dom: ">=16 || >=17 || >= 18"
-  checksum: 10/47ff54ec6dbd51ab28092bbe1adec71a346606af07482545fc2f13c8c021550ea23f350fa22d5621422097eeb0f9241bbb9926e074b7e120e1632eb85cf65bf1
+  checksum: 10/c223ef8af0d2186c5469f3a512ad68f98c86e39572e220607e0ff0e441a5b03ea238f0075f183de30c6f3e8d0c42a6af8c8e5a555f1c1122141bf65386e31189
   languageName: node
   linkType: hard