3.0.0-beta.21 - ResizeObserver is not defined in SSR

Describe the bug

I try to use tanstack virtual with Remix and I have the following issue when the page (where the tanstack virtual is render) :

ReferenceError: ResizeObserver is not defined at new Virtualizer (node_modules\@tanstack\virtual-core\build\esm\index.js:211:19) at node_modules\@tanstack\react-virtual\src\index.tsx:34:11 at useReducer (node_modules\react-dom\cjs\react-dom-server.node.development.js:1537:57) at Object.useState (node_modules\react-dom\cjs\react-dom-server.node.development.js:1475:10) at Object.useState (node_modules\react\cjs\react.development.js:1508:21) at useVirtualizerBase (node_modules\@tanstack\react-virtual\src\index.tsx:33:28) at useWindowVirtualizer (node_modules\@tanstack\react-virtual\src\index.tsx:73:10) at VirtualizedActionList (app\components\lists\VirtualizedList.tsx:33:23) at processChild (node_modules\react-dom\cjs\react-dom-server.node.development.js:3353:14) at resolve (node_modules\react-dom\cjs\react-dom-server.node.development.js:3270:5) at ReactDOMServerRenderer.render (node_modules\react-dom\cjs\react-dom-server.node.development.js:3753:22) at ReactDOMServerRenderer.read (node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29) at renderToString (node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27) at handleRequest (app\entry.server.tsx:54:16) at handleDocumentRequest (node_modules\@remix-run\server-runtime\dist\server.js:417:12) at requestHandler (node_modules\@remix-run\server-runtime\dist\server.js:72:18)

Your minimal, reproducible example

none applicable

Steps to reproduce

• Have a remix project
• Install tanstack
• Make a page with useWindowVirtualizer
• Arrive on this page with SSR (not CSR)

Expected behavior

Working without issue

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS : ALL
• Browser : ALL

tanstack-virtual version

v3.0.0-beta.21

TypeScript version

No response

Additional context

No response

Terms & Code of Conduct

• I agree to follow this project’s Code of Conduct
• I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[raskyer]

We should probably delay the ResizeObserver instanciation inside a useEffect in order to avoid panic at server side level. Or if window isn’t undefined.

[jangxyz]

I have a similar case, which is not for testing. I am running on svelte-kit, with v3.0.0-beta.23 The server reports error on the same line as @lakmalniranga noted, on virtual-core/index.js:95:

export const observeElementRect = (
  instance: Virtualizer<any, any>,
  cb: (rect: Rect) => void,
) => {
  const observer = new ResizeObserver((entries) => { // ← HERE
    cb({
      width: entries[0]?.contentRect.width as number,
      height: entries[0]?.contentRect.height as number,
    })
  })
  if (!instance.scrollElement) {
    return
  }
  cb(instance.scrollElement.getBoundingClientRect())
  observer.observe(instance.scrollElement)
  return () => { observer.unobserve(instance.scrollElement) }
}

Skimming through PR #420 looks like it fixes the case on _didMount, but this error appears during _willUpdate.

screenshot showing call in `_willUpdate`

I have tried some workarounds, and think the api has some room for improvement.

• I tried adding initialRect option as said in the docs, but did not work.
• I found out that passing observeElementRect option would override the behavior, and tried the following;
  • (A) Move the code if (!instance.scrollElement) part above the new ResizeObserver part, it would return on SSR.
  • (B) Check for globalThis.ResizeObserver , like mentioned in the comment.
  • © Check using import { browser } from "$app/environment";, a more svelte-kit way.
  • (D) Attach the resize-observer-polyfill, though the idea of adding a polyfill in SSR just to ignore the issue seems not right.

observeElementRect: (instance, cb) => {
  //if (!instance.scrollElement) { return; }                              // (A)
  //if (globalThis.ResizeObserver === undefined) { return; }              // (B)
  //if (!browser) { return; }                                             // (C)
  //if (!browser) { globalThis.ResizeObserver = ResizeObserverPolyfill; } // (D)

  const observer = new ResizeObserver((entries) => {
    var _entries$, _entries$2;
    cb({
      width: (_entries$ = entries[0]) == null ? void 0 : _entries$.contentRect.width,
      height: (_entries$2 = entries[0]) == null ? void 0 : _entries$2.contentRect.height,
    });
  });
  if (!instance.scrollElement) {
    return;
  }
  cb(instance.scrollElement.getBoundingClientRect());
  observer.observe(instance.scrollElement);
  return () => { observer.unobserve(instance.scrollElement); };
},

Which one would be ideal?

Any of the above does work, but the idea of “copying the whole implementation just to add a few if statements upfront” seems overkill. Maybe the first alternative – moving the instance.scrollElement check beforehand would be a clear solution?