Window Is not Defined

Answered

Arinji posted this in #help-forum

2023-08-11T17:34:22.000Z

Hello! So i read through the forum and most of the answers are use it in a useEffect

use client";

import { LayoutDashboard, Settings } from "lucide-react";
import Link from "next/link";
import BioLink from "./biolink";
import { useEffect, useState } from "react";

function Navbar() {
  const [pageName, setPageName] = useState("overview");
  useEffect(() => {
    let name = window.location.pathname.split("/")[2];
    if (name === "biolink") name = window.location.pathname.split("/")[4];
    setPageName(name);
  }, [window.location.pathname]);
  return (
    <div
      className={`${"w-[90vw] md:w-[300px] "}sticky left-0 top-0 z-[200]  hidden  h-[100vh]  shrink-0  origin-left flex-col items-center   justify-start gap-5 overflow-y-auto overflow-x-hidden bg-[#0A0B0D]  pb-5  font-dmSans transition-all    duration-700 ease-in-out md:flex `}
    >
      <div className="flex h-full w-full flex-auto  flex-col items-center justify-start overflow-y-auto overflow-x-hidden">
        <div
          className={`${"w-full "}mt-10 flex h-fit  shrink-0 flex-col items-center justify-center overflow-hidden transition-all duration-700 ease-in-out`}
        >
          <Link

Thats my code (the rest is just html) however i stilll get the window is not defined error in a client component with both useEffect and useState

Answered by Rafael Almeida

you can't read from window directly in the component body because it doesn't exist in the server. if you want to react to pathname changes the correct way is using a client component and the usePathname hook: https://nextjs.org/docs/app/api-reference/functions/use-pathname
you can use the return of this hook in the dependency array of useEffect

View full answer

12 Replies

rphlmr ðŸ«¡

2023-08-11T17:44:19.000Z

is it not because window is part of the dependency array?

if removing it works, try window?.xxx

Yi Lon Ma

2023-08-11T18:00:08.000Z

even though it is a client component, it first renders on the server. so accessing the window.location.pathname will give this error. useEffect doesn't need this as useEffect only runs when component is mounted hence ensuring that the window will never be undefined

ArinjiOP

2023-08-11T20:51:55.000Z

So what do i need to do?

rphlmr ðŸ«¡

2023-08-11T21:30:37.000Z

useEffect(() => {
    if(!window) return;
    let name = window.location.pathname.split("/")[2];
    if (name === "biolink") name = window.location.pathname.split("/")[4];
    setPageName(name);
  }, []);