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

@Arinji Hello! So i read through the forum and most of the answers are use it in a useEffect javascript 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

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

@Yi Lon Ma 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?

@Arinji 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);
  }, []);