Сборка Gatsby завершилась неудачно, потому что окно не определено в хуке React

Question

У меня есть специальный хук, который проверяет ширину окна для условного рендеринга некоторых элементов пользовательского интерфейса. Он работает нормально во время разработки, но не работает в сборке Gatsby.

Вот код для моего хука:

export const useViewport = () => {
  const [width, setWidth] = React.useState(window.innerWidth);

  React.useEffect(() => {
    const handleWindowResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", handleWindowResize);
    return () => window.removeEventListener("resize", handleWindowResize);
  }, []);

  // Return the width so we can use it in our components
  return { width };
}

Затем в моем компоненте я использую его так:

const { width } = useViewport();
const breakpoint = 767

/** in JSX **/

{
  width > breakpoint ? <Menu {...props} /> : <Drawer {...props} />
}

Согласно Гэтсби docs window недоступен в процессе сборки. Я пробовал использовать условие if (typeof window !== 'undefined') для хука, но получаю следующую ошибку:

Cannot destructure property 'width' of 'Object(...)(.  ..)' as it is undefined

Я также пытался обернуть const { width } = useViewport() в React.useEffect хук, но потом получаю ошибка, что width в моем JSX не определено.

Как я могу исправить эту проблему?

Answer 1

См. Здесь несколько решений

Специально это:

Вам нужно будет отрегулировать сам крючок. Определение значений по умолчанию во внешней области и их использование в качестве состояния по умолчанию должно помочь:

Answer 2

Попробуйте следующее:

      let width;

      if (typeof window !== 'undefined') width= useViewport();

   /** in JSX **/

   {
     width > breakpoint ? <Menu {...props} /> : <Drawer {...props} />
   }

Вы попали в точку, указав на проблему, однако вы вызывали свой собственный хук в начальной точке рендеринга, поэтому код вылетает, потому что window не был определен все же. С помощью этого фрагмента вы ждете, пока window не будет определено для вызова метода.