Window is not Defined

Stephen Cefali

Window is not Defined

Some of the most common errors in server side rendered React frameworks such as Next.js are the document is not defined or window is not defined errors. Why does it happen? This error typically appears when you or an installed package try to access the browser’s window objects directly in a page component, and it will throw this error because the window object is not yet available while a component is still mounting.

Say we have a sample index.js page in our Next.js application and try to access the browser localStorage like below; we’ll get the window is not defined error.

const Index = () => { window.localStorage.foo = "bar"; return ( <> <div> <h1>Hello world!</h1> </div> </> ); }; export default Index;

How to resolve

There are different approaches to resolving this error, one straightforward option is to simply employ react’s useEffect() hook to execute the code block that requires the browser’s window object, so that the code is only executed when the page component had been mounted.

import { useEffect } from "react"; const Index = () => { useEffect(() => { window.localStorage.foo = "bar"; }, []); return ( <> <div> <h1>Welcome to my Blog!</h1> </div> </> ); }; export default Index;

Resolving in Next.js

If you’re using Next.js, there is another possible solution which is to convert the part of our code that requires the browser’s window to a standalone component and import it to our page component using Next.js dynamic import feature. Next’s dynamic import is a feature used to lazy-loading or dynamically load components on demand. However, it includes an additional ssr option that allows you to enable or disable server rendering when using it.

We can simply set the ssr value to false and will be able to load components or external packages that rely on the browser’s window or document.

// components/SampleComponent.js const SampleComponent = () => { window.localStorage.foo = "bar"; return ( <> <div> <h1>Welcome to my Blog!</h1> </div> </> ); }; export default SampleComponent;

And dynamically load it in a page.

// pages/index.js import dynamic from "next/dynamic"; const DynamicComponent = dynamic( () => import("../components/SampleComponent"), { ssr: false, } ); const Index = () => { return ( <> <div> <h1>Hello world!</h1> <DynamicComponent /> </div> </> ); }; export default Index;

Get Started With Sentry

Get actionable, code-level insights to resolve Next.js performance bottlenecks and errors.

Run the line of code below to:

  1. Create a free Sentry account

  2. Run the CLI install command to automatically add the Sentry SDK to your project:

    npx @sentry/wizard@latest -i nextjs
  3. Start capturing errors and performance issues

Check our documentation for the latest instructions.

Loved by over 4 million developers and more than 90,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

Share on Twitter
Bookmark this page
Ask a questionJoin the discussion

Related Answers

A better experience for your users. An easier life for your developers.

    TwitterGitHubDribbbleLinkedinDiscord
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.