unwilling-turquoise

window is not defined

Uncaught Error: Switched to client rendering because the server rendering errored: window is not defined For the component. I get the error "window is not defined"

function Breadcrumb({ links, activeClass }: BreadcrumbProps) {
  const activeIndex = links.findIndex(link => window.location.pathname === link.to);
....

function Breadcrumb({ links, activeClass }: BreadcrumbProps) {
  const activeIndex = links.findIndex(link => window.location.pathname === link.to);
....

5 Replies

conscious-sapphire•3mo ago

This is normal in SSR, you have no window in SSR, and i would recommend checking for tanstack start examples to see the best practices when it comes to matching path name. Also tanstacklink already contains a way to set active link

import { useLocation } from '@tanstack/react-router'
const location = useLocation()
const paths = location.pathname.split('/').filter(Boolean)

import { useLocation } from '@tanstack/react-router'
const location = useLocation()
const paths = location.pathname.split('/').filter(Boolean)

https://tanstack.com/router/latest/docs/framework/react/api/router/useLocationHook

unwilling-turquoiseOP•3mo ago

Thank you And how do i make sure a component or a route runs only on client side

conscious-sapphire•3mo ago

Wrap in <ClientOnly>component

conscious-sapphire•3mo ago

conscious-sapphire•3mo ago

Documentation is your friend

Gaming

Programming

window is not defined

Did you find this page helpful?