Как исправить ReferenceError: window is not defined?

Question

[IIITRIX]

Без сборки все работает отлично. При сборке такая проблема
ReferenceError: window is not defined

at eval (webpack:///./src/editor/dist/editor.js?:14:3)
    at Object../src/editor/dist/editor.js (\build\index.js:1631:1)
    at __webpack_require__ (\build\index.js:684:30)
    at fn (\build\index.js:61:20)
    at eval (webpack:///./src/forms/ArticleForm.js?:23:84)
    at Module../src/forms/ArticleForm.js (\build\index.js:1643:1)
    at __webpack_require__ (\build\index.js:684:30)
    at fn (\build\index.js:61:20)
    at eval (webpack:///./src/pages/CreateArticlePage.js?:12:76)
    at Module../src/pages/CreateArticlePage.js (\build\index.js:1868:1)

Comments

[Денис Богданов]

У вас при сборке выполняется запуск SSR?

[IIITRIX]

Денис Богданов, да

Answer 1

[Антон]

if (typeof window !== 'undefined') {
  // код, который выполнится только в браузере
} else {
 // код, который выполнится только на сервере
}

Comments

[Евгений Коелсник]

Большое спасибо

Answer 2

[Денис Богданов]

Запуск SSR происходит в Node.js окружении, где нет доступа к браузерным объектам document, window, navigator а также к API браузера XHR, fetch и пр. Поэтому для создания универсального приложения вам необходимо отказаться от использования этих методов и объектов. Или делать проверку на их наличие:

if (window) {
  // код, который выполнится только в браузере
} else {
 // код, который выполнится только на сервере
}

Comments

[Антон]

Это не будет работать. проверка if window в ноде упадет.

Answer 3

[eroslove457]

Денис верно отметил, что

Запуск SSR происходит в Node.js окружении, где нет доступа к браузерным объектам document, window, navigator а также к API браузера XHR, fetch и пр.

Однако возможно использовать кастомный хук, который будет вычислять ширину viewport на стороне клиента:

import { useState, useEffect } from "react";

const useViewPortWidth = () => {
const [width, setWidth] = useState(0);
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
handleResize();

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);

}, []);
return width;
};

export default useViewPortWidth;

Затем вы добавляете хук в ваш компонент и таким образом вычисляете ширину видимой области.