Error

ReferenceError: window is not defined
at __webpack_require__ (/Users/adsn/Code/a20k/frontend/.next/server/webpack-runtime.js:33:43)
at eval (./app/tools/text-editor/editor/StackEditEditor.tsx:9:70)
at (ssr)/./app/tools/text-editor/editor/StackEditEditor.tsx

Solution

Next.js Dynamic Import with SSR Disabled.

Component that is imported has to be default exported.

// Dynamically import the StackEditEditor with SSR disabled
const StackEditEditor = dynamic(
  () => import("./editor/StackEditEditor"),
  { ssr: false }
);

The "use client" directive tells Next.js that the component should be rendered on the client side.

However, during the build and server-side rendering process, Next.js still imports and evaluates the code of that component.

If that code (or any code it pulls in) accesses browser-specific globals like window at the top level, it will cause errors on the server since those globals aren’t available in the Node.js environment.

Using a dynamic import with SSR disabled prevents the module from being loaded and evaluated on the server, thereby avoiding the premature access of client-only objects.

Window is not defined

Error

Solution