Which package(s) are affected?

Virtualizer (@lit-labs/virtualizer)

Description

I encountered a slight problem with the following statement at the very beginning of Virtualizer.ts:

let _ResizeObserver: typeof ResizeObserver | undefined = window?.ResizeObserver;

During server-side rendering in a Node.js environment (e.g. a Next.js app) the window object, being a browser-specific global object, does not exist. When the code tries to access window directly without checking if it's defined, it results in a ReferenceError.

The window?.ResizeObserver usage suggests that it should safely check window before trying to access ResizeObserver. However, this syntax only works if window is null or undefined. If window is not declared at all (as is the case on the server), trying to evaluate window throws a ReferenceError.

I see two possible straightforward solutions to the problem. We could either keep the same elegant implementation but substitute window?.ResizeObserver with globalThis?.ResizeObserver or we could do something a bit more old-school like:

let _ResizeObserver: typeof ResizeObserver | undefined;

if (typeof window !== 'undefined') {
  _ResizeObserver = window.ResizeObserver;
}

Reproduction

Setup

Clone the sample project repo:
git clone https://github.com/IMinchev64/lit-vitrualizer-nextjs.git

Now run npm install and then run the development server with npm run dev.

Steps to Reproduce

1. Open http://localhost:3000/ with your browser to see the sample page.
2. Reload the page.
3. Observe the errors in the server console/terminal

Workaround

Avoiding use of window resolves the issue.

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

lit@3.1.1, @lit-labs/virtualizer@2.0.12

Browser/OS/Node environment

Browser: Microsoft Edge for Business Version 121.0.2277.112 (Official build) (64-bit),
OS: Windows 10
Node version: v21.1.0
npm version: 9.7.2