fix(core): polyfill resize-observer for development to avoid error overlay (#5943)

Brought a temporary solution from https://github.com/petyosi/react-virtuoso/issues/875#issuecomment-1962897033

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",

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';

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;
+}