You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
Same for the Next.js 13 environment. It's not compatible with server-side applications.
We are using Lit for our app (Web3Modal) and while using the Web3Modal in the Next.js app, server-side related issues occurs. Prob making the page client-side only would fix but I don't prefer to do that just because of the virtualizer, instead I think it should be optimized for server-side apps.
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
withglobalThis?.ResizeObserver
or we could do something a bit more old-school like: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 withnpm run dev
.Steps to Reproduce
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
The text was updated successfully, but these errors were encountered: