Next.js Discord

Discord Forum

I need help with reference error: window not defined

Answered
Orangetailed potter wasp posted this in #help-forum
Open in Discord
Orangetailed potter waspOP
I am currently making a school administration website using next, firebase, tailwind and typescript. Right now i'm making a log in and sign up page. I want to use phone verification to register my users along with their credentials. My auth component is in my firebase folder. my log in page is under app/login/page.jsx.
Answered by Blanc de Hotot
you have 2 solution
1- use dynamic import
2- use useEffect with useState
like this way

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

export default function Client() {
const [showComp, setShowComp] = useState(false);

useEffect(() => {
setShowComp(true);
}, []);

return (
#Unknown Channel
{showComp && (
<div>{JSON.stringify(document?.getElementById("root"))}</div>
)}
</>
);
}
View full answer

8 Replies

Orangetailed potter waspOP
ReferenceError: window is not defined
at 7213 (/vercel/path0/.next/server/chunks/522.js:67:109128)
at webpack_require (/vercel/path0/.next/server/webpack-runtime.js:1:146)
at 4666 (/vercel/path0/.next/server/app/login/page.js:1:3288)
at webpack_require (/vercel/path0/.next/server/webpack-runtime.js:1:146)
at I (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:43:5587)
at /vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:43:7561
at F._fromJSON (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:43:7957)
at JSON.parse (<anonymous>)
at O (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:43:5338)
at t (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:43:11162)
Error occurred prerendering page "/login". Read more: https://nextjs.org/docs/messages/prerender-error
ReferenceError: window is not defined
at 7213 (/vercel/path0/.next/server/chunks/522.js:67:109128)
at webpack_require (/vercel/path0/.next/server/webpack-runtime.js:1:146)
at 4666 (/vercel/path0/.next/server/app/login/page.js:1:3288)
at webpack_require (/vercel/path0/.next/server/webpack-runtime.js:1:146)
at I (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:43:5587)
at /vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:43:7561
at F._fromJSON (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:43:7957)
at JSON.parse (<anonymous>)
at O (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:43:5338)
at t (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:43:11162)
Orangetailed potter waspOP
Blanc de Hotot
you have 2 solution
1- use dynamic import
2- use useEffect with useState
like this way

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

export default function Client() {
const [showComp, setShowComp] = useState(false);

useEffect(() => {
setShowComp(true);
}, []);

return (
#Unknown Channel
{showComp && (
<div>{JSON.stringify(document?.getElementById("root"))}</div>
)}
</>
);
}
Answer
riský
@Blanc de Hotot it's dynamic import with ssr disabled (just trying to be specific here), also can you use code blocks to make it easier to look at 🙂
Orangetailed potter waspOP
thanks
i fixed it by declaring window and use effects