iJewel3DDocs

Appearance

Contact supportSign in
DevelopersTroubleshooting

"window is not defined" in Next.js ​

Stop the server-side render of the viewer component in a Next.js app.

Symptom ​

Next.js stops with this error when a page imports the viewer:

text
window is not defined

Cause ​

The viewer uses window, WebGL and other browser-only APIs. Next.js renders a component on the server first. The server has no window.

Fix ​

Step 1 of 5

  1. Load the WebGi script one time in the root layout.

    tsx
    import Script from "next/script";
import type { ReactNode } from "react";

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Script src="https://releases.ijewel3d.com/libs/webgi-v0/bundle-<version>.js" strategy="beforeInteractive" />
        {children}
      </body>
    </html>
  );
}

  2. In the page file, write "use client" as the first line.

  3. Import ViewerComponent with next/dynamic and set ssr: false.

    tsx
    "use client";
import dynamic from "next/dynamic";

const ViewerComponent = dynamic(
  () => import("@ijewel3d/mini-viewer").then((mod) => mod.ViewerComponent),
  { ssr: false }
);

export default function Home() {
  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <ViewerComponent modelId="YOUR_MODEL_ID" />
    </div>
  );
}

  4. Remove each direct import of ViewerComponent from @ijewel3d/mini-viewer.

  5. Replace <version> with a current release. Then build the app again.

If the problem continues ​

Contact support. Send the full error text and the file that imports the viewer.