I am working on a Next.js project where I am encountering the error: Error occurred prerendering page "/dashboard". Read more: ReferenceError: window is not defined at new u (D:\Projects\FREELANCE\ROAD RUNNER RSA\Frontend\.next\server\chunks\500.js:13:9122)

1. What I Have Tried Ensured the code runs only in the browser by wrapping window inside useEffect:

useEffect(() => {
  if (typeof window !== "undefined") {
    const scrollbarWidth =
      window.innerWidth - document.documentElement.clientWidth;
    setScrollbarWidth(scrollbarWidth);
  }
}, []);

2. Checked that the component is a client component by adding "use client" at the top of the file:

"use client";
import { useEffect, useState } from "react";

3.Checked third-party libraries (lucide-react, framer-motion, next/navigation, and @radix-ui/react-visually-hidden) to ensure none of them are accessing window on the server.

I am working on a Next.js project where I am encountering the error: Error occurred prerendering page "/dashboard". Read more: https://nextjs./docs/messages/prerender-error ReferenceError: window is not defined at new u (D:\Projects\FREELANCE\ROAD RUNNER RSA\Frontend\.next\server\chunks\500.js:13:9122)

1. What I Have Tried Ensured the code runs only in the browser by wrapping window inside useEffect:

useEffect(() => {
  if (typeof window !== "undefined") {
    const scrollbarWidth =
      window.innerWidth - document.documentElement.clientWidth;
    setScrollbarWidth(scrollbarWidth);
  }
}, []);

2. Checked that the component is a client component by adding "use client" at the top of the file:

"use client";
import { useEffect, useState } from "react";

3.Checked third-party libraries (lucide-react, framer-motion, next/navigation, and @radix-ui/react-visually-hidden) to ensure none of them are accessing window on the server.

• javascript
• reactjs
• next.js
• mern
• nextjs14

• 3 Did you try out the solution proposed by the link in the error? nextjs./docs/messages/… – 3limin4t0r Commented Feb 2 at 17:03
• This question is similar to: Next.js 13 "window is not defined". If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. – derpirscher Commented Feb 2 at 22:10

2 Answers 2

• Avoid Module-Level Window References: Ensure that no code accesses window outside of useEffect or other browser-only functions.
• Review Imported Components: Check if any imported component (even in client components) references window at the module level.
• Use Dynamic Imports: For components that require window,

import dynamic from 'next/dynamic';
const ClientOnlyComponent = dynamic(() => import('./YourComponent'), { ssr: false });

• Check _app.js and _document.js: Ensure these files don’t have any server-side window references.

Answer: The issue was lenis library, when I created its object it was not in the useEffect hook! Now I have used useEffect and it's working well!