Как мне обойти окно, не определенное во время сборки Gatsby? Если чек не работает

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

WebpackError: ReferenceError: окно не определено

То, что я пытался сделать, это вытащить слаг из WordPress, и если бы он соответствовал слагу текущей страницы, он показал бы активный цвет.

Вот мой фрагмент кода с проверкой окна внутри стилизованного компонента. Подтверждено, что условное работает как надо в разработке.

const noBrowser = () => typeof window === "undefined"
color:  ${props=> noBrowser()?'#000':(props.to===window.location.pathname? '#05C079ff':'#F21C5Eff')};

но это, похоже, не улавливает отсутствие окна браузера, и я все равно получаю ту же ошибку.

У кого-нибудь есть предложение о том, как обойти это? Страницы генерируются из слагов WordPress через graphql. Ссылки создаются в виде значков.

🤔 А знаете ли вы, что...
JavaScript позволяет создавать асинхронные запросы к серверу с помощью технологии AJAX.


1
290
1

Ответ:

Решено

Вы пробовали что-то подобное?

color:  ${props => noBrowser ? '#000' : (props.to===window.location.pathname? '#05C079ff':'#F21C5Eff')};

Или напрямую изменить условие:

color:  ${props=> typeof window !== "undefined" ? (props.to===window.location.pathname? '#05C079ff':'#F21C5Eff') : '#000':};