Next.js Discord

Discord Forum

ReferenceError: window is not defined

Answered
Serengeti posted this in #help-forum
Open in Discord
SerengetiOP
Error Build:
ReferenceError: window is not defined
    at d (D:\My-APP\.next\server\chunks\959.js:1:5844)
    at nj (D:\My-APP\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:46251)
    at nM (D:\My-APP\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:47571)
    at nM (D:\My-APP\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:61546)
    at nN (D:\My-APP\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:64546)
    at nB (D:\My-APP\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:67538)
    at nD (D:\My-APP\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:66680)
    at nN (D:\My-APP\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:64853)
    at nB (D:\My-APP\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:67538)
    at nM (D:\My-APP\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:58560) {
  digest: '4022123069'
}

Error occurred prerendering page "/client-side". Read more: https://nextjs.org/docs/messages/prerender-error
Answered by Serengeti
ISSUE FOUND:
So the issue is in the layout.tsx although error saying its in the /page, The sidebar component is the issue since it is dynamic.

SOLUTION:
import dynamic from 'next/dynamic'

const Sidebar = dynamic(() => import('@/components/Sidebar'), {
    ssr: false,
})

Reference: https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#examples
View full answer

9 Replies

SerengetiOP
"use client";
import { useSession } from "next-auth/react";
import Image from "next/image";
import { useEffect } from "react";

export default function Profile() {

  useEffect(() => {
    if (typeof window !== "undefined") {
    }
  }, []);

  const { data: session, status } = useSession()

  return (
    <section className="bg-ct-blue-600  min-h-screen pt-20">
      <div className="max-w-4xl mx-auto bg-ct-dark-100 rounded-md h-[20rem] flex justify-center items-center">
        <div>
          <p className="mb-3 text-5xl text-center font-semibold">
            Profile Page
          </p>
          {!session?.user ? (
            <p>Loading...</p>
          ) : (
            <div className="flex items-center gap-8">
              <div>
                <Image
                  src={session?.user.image ? session?.user.image : "/images/default.png"}
                  alt={`profile photo of ${session?.user.name}`}
                  width={90}
                  height={90}
                />
              </div>
              <div className="mt-8">
                <p className="mb-3">ID: {session?.user.id}</p>
                <p className="mb-3">Name: {session?.user.name}</p>
                <p className="mb-3">Email: {session?.user.email}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}


Reference: https://next-auth.js.org/getting-started/client
SerengetiOP
tried server side, not allowed in app
that's weird, ill try to remove any related to next-auth and see if that's the issue
ReferenceError: window is not defined
    at d (D:\MY-APP\.next\server\chunks\959.js:1:5844)
    at nj (D:\MY-APP\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:46251)
    at nM (D:\MY-APP\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:47571)
    at nM (D:\MY-APP\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:61546)
    at nN (D:\MY-APP\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:64546)
    at nB (D:\MY-APP\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:67538)
    at nD (D:\MY-APP\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:66680)
    at nN (D:\MY-APP\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:64853)
    at nB (D:\MY-APP\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:67538)
    at nM (D:\MY-APP\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:58560) {
  digest: '4022123069'
}
   Generating static pages (14/15)  [==  ]
Error occurred prerendering page "/client-side". Read more: https://nextjs.org/docs/messages/prerender-error


removed next-auth but still the same 🥲
this is the layout.tsx:
import Head from 'next/head';
import Sidebar from '../../components/Sidebar';

export default function AppLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    return (
        <>
            <Head>
                <title>Profie Client</title>
                <meta property="og:title" content="Brytatutors official website" key="title" />
            </Head>
            <div className="bg-neutral-100 overflow-hidden flex flex-row">
                <Sidebar />
                <div className="flex flex-col flex-1">
                    {children}
                </div>
            </div>

        </>
    );
}
this is the only error i have to run it on aws amplify
SerengetiOP
ISSUE FOUND:
So the issue is in the layout.tsx although error saying its in the /page, The sidebar component is the issue since it is dynamic.

SOLUTION:
import dynamic from 'next/dynamic'

const Sidebar = dynamic(() => import('@/components/Sidebar'), {
    ssr: false,
})

Reference: https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#examples
Answer