Lazy.eval - Window is Not Defined Error

[carleighroche]

Although the data is coming through and the page is rendering fine, I am seeing a window is not defined error. Has anyone seen this / know the source of the issue?

⨯ Internal error: ReferenceError: window is not defined
    at Lazy.eval [as fn] (./node_modules/@glideapps/glide-data-grid/dist/esm/common/browser-detect.js:25:73)
    at get value [as value] (./node_modules/@glideapps/glide-data-grid/dist/esm/common/browser-detect.js:14:45)
    at realizeKeybinds (./node_modules/@glideapps/glide-data-grid/dist/esm/data-editor/data-editor-keybindings.js:67:87)
    at eval (./node_modules/@glideapps/glide-data-grid/dist/esm/data-editor/data-editor-keybindings.js:129:16)
    

I am running this app on NextJS 14 in a client component.

What is a good place to start looking for the source of the issue?

[mengxi-ream]

I also have this issue

[mengxi-ream]

This error occurs because Next.js attempts to perform server-side rendering (SSR) by default, even for components marked with "use client". During SSR, the window object is not available since it's a browser-specific API.

To resolve this issue with @glideapps/glide-data-grid, the temporary solution is :

1. Use dynamic import for the DataEditor component
2. Disable SSR for this specific component

like

const DataEditor = dynamic(
  () => import("@glideapps/glide-data-grid").then((mod) => mod.DataEditor),
  { ssr: false },
);

But the proper solution should not use window during ssr time,

for example

// this code will run on server and client
const Component = () => {
  // on server, it will throw the error because we don't have window
  const windowWidth = window.innerWidth;  
  return <div>Width: {windowWidth}</div>;
}

const Component = () => {
  // useEffect will only run in client
  const [windowWidth, setWindowWidth] = useState(0);
  useEffect(() => {
    setWindowWidth(window.innerWidth);
  }, []);
}

This requires us to improve the source code