Next.js Discord

Discord Forum

Next 14.2.5 + leaflet 1.9.4 -"ReferenceError: window is not defined"

Answered
Kritteria__ posted this in #help-forum
Open in Discord
Kritteria__OP
Hello, everyone. I'd like some help. Basically, I'm trying to insert a map with leaflet and next, but after compiling and accessing the route (/), I get the error ReferenceError: window is not defined. I'll give you more information about the codes below. Thank you in advance for your assistance.

Next version: 14.2.5
Leaflet: 1.9.4

* The code is attached

Stacktrace:
 ⨯ ReferenceError: window is not defined
    at __webpack_require__ (/home/anao/Área de Trabalho/scrapers/frontend/my-app/.next/server/webpack-runtime.js:33:43)
    at __webpack_require__ (/home/anao/Área de Trabalho/scrapers/frontend/my-app/.next/server/webpack-runtime.js:33:43)
    at eval (./src/components/MapComponent.tsx:10:71)
    at (ssr)/./src/components/MapComponent.tsx (/home/anao/Área de Trabalho/scrapers/frontend/my-app/.next/server/app/page.js:217:1)
    at __webpack_require__ (/home/anao/Área de Trabalho/scrapers/frontend/my-app/.next/server/webpack-runtime.js:33:43)
    at eval (./src/app/page.tsx:13:82)
    at (ssr)/./src/app/page.tsx (/home/anao/Área de Trabalho/scrapers/frontend/my-app/.next/server/app/page.js:162:1)
    at Object.__webpack_require__ [as require] (/home/anao/Área de Trabalho/scrapers/frontend/my-app/.next/server/webpack-runtime.js:33:43)
    at JSON.parse (<anonymous>)
digest: "378328321"
Answered by Sun bear
"use client";

export default function MountedContent({ children }: { children: React.ReactNode }) {
  const [mounted, setMounted] = useState<boolean>(false);
  useEffect(() => setMounted(true), []);
  return (
    <>
      {mounted ? children : null}<>
  );
}
View full answer

6 Replies

Kritteria__OP
Hello?
Sun bear
Most likely it is because the component is not mounted and you dont have access to window.

You could show the whole component only when it is mounted or use useEffect and access window inside it
Sun bear
"use client";

export default function MountedContent({ children }: { children: React.ReactNode }) {
  const [mounted, setMounted] = useState<boolean>(false);
  useEffect(() => setMounted(true), []);
  return (
    <>
      {mounted ? children : null}<>
  );
}
Answer
Kritteria__OP
Thank you for your reply. I'll try to implement your way and test it. Can you answer another question? You're referring to "showing every component only when it's 'assembled'". In this case, should I wait for Next to do the hydration and send the information to the client to be able to access the window?
@Kritteria__ Thank you for your reply. I'll try to implement your way and test it. Can you answer another question? You're referring to "showing every component only when it's 'assembled'". In this case, should I wait for Next to do the hydration and send the information to the client to be able to access the `window`?
Sun bear
Its a bit dependend on what you are trying to do. In my current project I need to access window a lot and created a provider that returns only the content when its mounted. The code I sent above.

But in genreal you can just put window in a useEffect. Just make sure its not running when there is no access to the window