Есть ли разница в том, как проверить наличие window в js?

Question

[djEban]

Запускаю проект NextJS. Код сперва выполняется на сервере, следовательно window нет.

const [isMobile, setIsMobile] = useState(window?.innerWidth < 1000);

Но во время билда ругается . что window is undefined. хотя я явно указал optional chaining
Связано ли это, может, с тем, что код переводится в es5 синтаксис? Просто если поставить typeof window !== undefined, то тогда все работает

Comments

[WapSter]

хотя я явно указал optional chaining

блин ты указал, что может не быть у window свойства innerWidth, а не то что window может не быть

[djEban]

WapSter, в смысле? Опшинал чейнинг проверяет левое значение на undefined

[WapSter]

djEban, так у тебя window нет у чего он будет тебе проверять "знаток" js. И проверяет не значение, а существование ключа

Answer 1

[wonderingpeanut]

Это связано с тем, что html документ формируется на сервере. Как ты сам сказал, на сервере нет window объекта, поэтому он и ругается.

Сделай

const [isMobile, setIsMobile] = useState(undefined);

и при загрузке страницы измени стейт в нужное тебе значение (юзефект)

const [state,setState] = useState();
useEffect(() => {
  if (typeof window !== 'undefined')
    setState(...)
}

Comments

[djEban]

да. но почему опшинал чейнинг не работает? То есть если напишу window?.innerHeight ,то все равно ругается

[wonderingpeanut]

djEban, опшинал чейнинг работает только для существующих переменных, но на сервере переменной window в принципе нет, она не объявлена, поэтому возникает ошибка.

const undefinedVar = undefined ;
if (undefinedVar) console.log("этот консоль лог никогда не будет выполнен")
if (variableThatWasNotDefined) console.log("variableThatWasNotDefined не была объявлена, поэтому будет ошибка")

[djEban]

ааааа,круто,спасибо