Collecting page data .[ReferenceError: window is not defined] , in nextjs15

[ahmerarain]

i have add all my component 'use client' where I am using window, but still getting problems during build,
i also added below condition but still getting the same problem
if (typeof window == "undefined" || typeof document == "undefined") return;

[icyJoseph]

i have add all my component 'use client' where I am using window, but still getting problems during build,
i also added below condition but still getting the same problem

use client marks a module as a client component, but that doesn't mean it will only execute in the browser:

• Why do Client Components get SSR'd to HTML? reactwg/server-components#4

Client Components are still SSR'd.

Could you show us more of how the code is accessing window?

[ahmerarain]

yes, you are right, but on every component that contains window, I added there 'use client' and condition to check window type is not undefined

[icyJoseph]

Yeah, but use client doesn't skip SSR.

The typeof should have worked, but I'd like to see how it is being used. Clearly you still have - some unguarded access. Are you always using typeof?

[ahmerarain]

yes, always using typeof, like below screenshot

but i will check again and then get back to you , thx :)

[icyJoseph]

You don't need those checks in the screenshot. The window object, and document, will be available within the useEffect. Again, only within the useEffect, because it runs only on the browser. Same with local storage, but once again, only inside the useEffect.

Maybe a library you use, used window without guards?

[icyJoseph]

Also make sure you don't access the window object, at the top level scope of a module, that you then import. Importing a module, runs the top level scope code, and if the window object is referenced there, it'll cause issues too.

[ahmerarain]

that makes sense,
i will check and refactor the code

Thx for the help joseph

[ahmerarain]

thx, joseph its worked, now
i made a separate hook for window and document ,

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

const useClientSide = () => {
const [clientWindow, setWindow] = useState(undefined);
const [clientDocument, setDocument] = useState(undefined);

useEffect(() => {
setWindow(window);
setDocument(document);
}, []);

return { window: clientWindow, document: clientDocument };
};

export default useClientSide;
`