Как устранить проблему WebpackError: TypeError: window.matchMedia is not a function?

Question

[stepbystep]

Столкнулся проблемой при сборке проекта функция matchMedia не запускается для глобального объекта window. В проекте используется Gatsby / React. Есть кастомный хук на определенный ширине экрана срабатывает. Когда проект запущен все работает хорошо, а вот когда я собираю проект npm run build Webpack выдает ошибку. Как можно устранить эту ошибку ?

const useMedia = (query) => {
    const windowGlobal = typeof window !== 'undefined' && window
    const [matches, setMatches] = useState(windowGlobal.matchMedia(query).matches)
    useEffect(() => {
      const media = windowGlobal.matchMedia(query)
      if (media.matches !== matches) setMatches(media.matches)
      const listener = () => setMatches(media.matches)
      media.addEventListener('change', listener)
      return () => media.removeEventListener('change', listener)
    }, [matches, query])

    return matches
  }
  const match = useMedia('(max-width: 575px)')
  const changeLabel = match ? 'Cancel' : 'Add Now'

Comments

[Ярослав Иванов]

typeof window !== 'undefined'

А зачем это?

[Ярослав Иванов]

Ну окей вернулся false
Как вы у false будете вызывать метод без проверки?
windowGlobal.matchMedia(query)

[stepbystep]

Ярослав Иванов,

Сменил изначальный стейт на false и все сработало и добавил проверку на window

const useMedia = (query) => {
    const windowGlobal = typeof window !== 'undefined' && window
    const [matches, setMatches] = useState(false)

    useEffect(() => {
      if (windowGlobal) {
        const media = windowGlobal.matchMedia(query)
        if (media.matches !== matches) setMatches(media.matches)
        const listener = () => setMatches(media.matches)
        media.addEventListener('change', listener)
        return () => media.removeEventListener('change', listener)
      }
    }, [matches, query])

    return matches
  }

[stepbystep]

Ярослав Иванов, можно ли считать это правильным решением ?