Gatsby: WebpackError: ReferenceError: window is not defined - Using Stateful functional component with hooks

[PatrickLambert1101]

I am trying to use a hook to determine the size of my window and am getting a build error when deploying to netlify

const toggle = () => setToggle(!isToggledOn); var windowSize = 900; if (window) { windowSize = useWindowSize(); } return ( WebpackError: ReferenceError: window is not defined

Here is my code

`import React, { useState, useEffect } from 'react';
import HeadLogo from './HeadLogo';
import useWindowSize from '@rehooks/window-size';
import TransitionLink from 'gatsby-plugin-transition-link';
import NavbarBrand from './styles/NavbarBrand';
import NavLinks from './styles/NavLinks';
import HamburgerMenu from './HamburgerMenu';
import isEntryExit from './isEntryExit';
import InnerDrop from './InnerDrop';

export default function Navbar() {
const [isToggledOn, setToggle] = useState(false);
const toggle = () => setToggle(!isToggledOn);
var windowSize = 900;
windowSize = useWindowSize();

return (

isToggle={
(isToggledOn && windowSize.innerWidth < 800) ||
windowSize.innerWidth > 800
}
/>

className={
(isToggledOn && windowSize.innerWidth < 800) ||
windowSize.innerWidth > 800
? 'toggle-open'
: 'toggle-closed'
}
>

HOME

RETREATS

ABOUT US

CONTACT

);
}
`

I have seen in other issues that set the function in a componentDidMount would solve the issue but that is not possible with hooks. Does anyone have any suggestions?

Thanks so much.

P.S this is my first post to GitHub :) So if I've left anything out of this question please let me know.

[DanielRuf]

Did you already try typeof window !== 'undefined'?

[joperron]

Try this

let windowsize = 900
if (typeof window !== 'undefined') {
 windowsize =  useWindowSize();
}

[joperron]

you probably want to define something closer to the actual object you want to use like:

let windowsize = { innerWidth: '900' }

[universse]

can you please share your useWindowSize code also?

[universse]

based on what you are trying to do, I think it should be something like this

function useWindowSize (defaultValue) {
  const [windowSize, setWindowSize] = useState({ innerWidth: defaultValue })

  useLayoutEffect(() => {
    setWindowSize({ innerWidth: window.innerWidth })
  }, [])

  return windowSize
}

then in your component

const windowSize = useWindowSize(900)

[sidharthachatterjee]

Hey @PatrickLambert1101

The ReferenceError error is occurring because window is not available during server side rendering (when gatsby build is run)

To fix this, you need to run this code only on the client side. You can do this by calling the hook inside an effect. Depending on your use case, you can use useEffect or useLayoutEffect

[Powell-v2]

Guys, just a note:

You can do this by calling the hook inside an effect

In a (function-based) component, hooks should be called only at the top level. Doc ref

[Powell-v2]

@PatrickLambert1101 you'd need to adjust the hook itself. Defining default values in the outside scope and using them as default state should do the trick:

let defaultHeight
let defaultWidth

if (typeof window !== `undefined`) {
  defaultHeight = window.innerHeight
  defaultWidth = window.innerWidth
}

const useWindowSize = () => {
  const [dimensions, setDimensions] = useState({
    windowHeight: defaultHeight,
    windowWidth: defaultWidth,
  })

  useEffect(() => {
    const handler = () => setDimensions({
      windowHeight: window.innerHeight,
      windowWidth: window.innerWidth,
    })

    window.addEventListener(`resize`, handler)
    return () => window.removeEventListener(`resize`, handler)
  }, [])

  return dimensions
}

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[Siregar]

@PatrickLambert1101 you'd need to adjust the hook itself. Defining default values in the outside scope and using them as default state should do the trick:

let defaultHeight
let defaultWidth

if (typeof window !== `undefined`) {
  defaultHeight = window.innerHeight
  defaultWidth = window.innerWidth
}

const useWindowSize = () => {
  const [dimensions, setDimensions] = useState({
    windowHeight: defaultHeight,
    windowWidth: defaultWidth,
  })

  useEffect(() => {
    const handler = () => setDimensions({
      windowHeight: window.innerHeight,
      windowWidth: window.innerWidth,
    })

    window.addEventListener(`resize`, handler)
    return () => window.removeEventListener(`resize`, handler)
  }, [])

  return dimensions
}

This solved my problem.

[ramadan26]

@Siregar
Where should I put this code ?