Как использовать компоненты, которые используют ссылку на окно в React, с рендерингом на стороне сервера?
Примером такого компонента является Pikaday (react-pikaday), который содержит в своем коде эту строку
hasEventListeners = !!window.addEventListener
но window не определен на сервере, поэтому, когда я запускаю код, он выдает ошибку ReferenceError: window is not defined.
Я попытался решить эту проблему, условно импортируя компонент Pikady, что-то в этом роде:
let Pikaday;
if (typeof window !== 'undefined' && window.document && window.document.createElement) {
import('./Pikaday').then(P => {
Pikaday = P.default;
});
}
В таком случае он не вызывает ошибку, потому что компонент не загружен, но я предположил, что исходный HTML-код, отправленный с сервера, не будет содержать этот компонент, а затем он каким-то образом «переключится» на код JS на стороне клиента, и компонент будет нагрузка. Но этого не происходит. Я новичок в рендеринге на стороне сервера в целом, поэтому я немного заблудился.
Как я могу это решить? У меня такая же проблема с библиотекой Leaflet, которая также содержит window в своем коде.
Ответы 2
Сделайте простую проверку окна.
if (typeof window !== 'undefined') {
// write your logic here
}
Я изменил условие if, чтобы код был более понятным.
В конце концов я использовал этот форк Pikaday, который вводит несколько небольших изменений для проверки доступности window:
https://github.com/everdimension/Pikaday
Я не думаю, что был другой способ, кроме как отредактировать сам плагин.
windowиспользуется в компоненте NPM (Pikaday, Leaflet). Я не могу ничего изменить. Со своей стороны я проверяюwindow- переменнаяisServerв опубликованном мной фрагменте кода является результатом вызова этой функцииexport const isServer = !( typeof window !== 'undefined' && window.document && window.document.createElement );. Но проблема не в этом. Проблема в том, как НЕ загружать компонент Pikaday каким-либо образом на сервере, а затем ЗАГРУЗИТЬ его на стороне клиента. Или, по крайней мере, я думаю, что мне нужно этого добиться.