Один из моих реквизитов использует условный оператор для определения цвета элемента навигации. Но оператор требует 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.
Вы пробовали что-то подобное?
color: ${props => noBrowser ? '#000' : (props.to===window.location.pathname? '#05C079ff':'#F21C5Eff')};
Или напрямую изменить условие:
color: ${props=> typeof window !== "undefined" ? (props.to===window.location.pathname? '#05C079ff':'#F21C5Eff') : '#000':};