[solid-start] Browser hangs when navigating on mount in v1.159.1 and forward

[jakst]

Which project does this relate to?

Start

Describe the bug

Doing a navigate on mount causes the page to hang (at least in chrome) on v1.159.1 and foward (tested up to v1.160.0)

These two factors made it reproduce reliably:

• Running the app under a basepath
• Having a <Link> component mounted on the page

I could reproduce it under some other circumstances as well (basepath wasn't required for all of them for example), but this was the most minimal version I could break it down into.

Your Example Website or App

https://github.com/jakst/tss-redirect-in-effect-hang

Steps to Reproduce the Bug or Issue

1. Checkout repo => pnpm install => pnpm dev
2. Open http://localhost:3000/
3. Notice the browser tab hangs and displays the / route, while the URL has changed to the /b route

Expected behavior

I expect the router to redirect without causing what I believe to be infinite loops, causing the browser to hang.

Screenshots or Videos

No response

Platform

• Router / Start Version: 1.159.1
• OS: MacOS
• Browser: Chrome
• Browser Version: 145
• Bundler: vite
• Bundler Version: 7.3.1

Additional context

No response

[schiller-manuel]

@nlynzaad that's this one here then probably: #6607

[nlynzaad]

@jakst the reason for this happening is due to the fact that #6607 added the location the Solid's reactivity system to correctly re-render the links if values changed between SSR and client-side rendering.

By running navigation inside a createEffect the location is now being monitored and causing the effect to re-run when the location changes after the component has completed rendering. redirects should only happen once when the component mounts or prior to the mount.

Tanstack Router/Start has builtin functionality to redirect. This can be done by throwing a redirect in the loader, this is the recommended method:

export const Route = createFileRoute('/')({
  beforeLoad: () => {
    throw redirect({ to: '/b' })
  },
})
or
export const Route = createFileRoute('/')({
  loader: () => {
    throw redirect({ to: '/b' })
  },
})

However should this not meet your needs there are some other options to ensure the navigate is not dependant on the changing location:

1)
Run once on mount
import { onMount } from 'solid-js'

onMount(() => {
  navigate({ to: '/b' })
})

2)
Untrack the navigate call
import { createEffect, untrack } from 'solid-js'

createEffect(() => {
  untrack(() => navigate({ to: '/b' }))
})

3)
Guard by location
import { useRouterState } from '@tanstack/solid-router'

const pathname = useRouterState({ select: (s) => s.location.pathname })

createEffect(() => {
  if (pathname() === '/') {
    navigate({ to: '/b' })
  }
})

[jakst]

By running navigation inside a createEffect the location is now being monitored and causing the effect to re-run when the location changes after the component has completed rendering. redirects should only happen once when the component mounts or prior to the mount.

Hmm, but why does navigate need to track the location? It's just referencing a static path. I guess I would still wish for a more graceful failure mode here, like an error message. But I understand that might be tricky.

Either way, thanks for the thorough walkthrough. In this case we explicitly wanted the navigation to happen after page render, because it was a redirect that only happened very rarely, and we didn't want the data to hold up the page load for the happy path. We did end up blocking the page load and throwing a redirect to get past this issue for now, but good to know I can untrack the call to get back the old behaviour!

[nlynzaad]

Glad if this will resolve the issue for you.

So just to clarify, it's not that navigate tracks location but rather that the 3 factors together can create a "perfect storm":

Link creates a Solid signal (useRouterState for location) and uses it inside a memo (isActive), to properly track location changes and apply the active properties correctly. That hooks the router store into Solid’s reactive graph for this component tree.

navigate() calls into router code that reads router state (via buildLocation, matchRoutesLightweight, etc.).

Since we are running navigate in an effect and since Link has wired router location into Solid reactivity, the effect starts tracking router location changes. createEffect(() => navigate(...)) will therefore re-run whenever any reactive signal read during that call chain changes.

Without a Link, there’s no useRouterState subscription in this component, so the component tree has no reactive dependency on router location, and the effect doesn’t re-trigger.

This gets exacerbated when using a basePath since internally update the internal hrefs and publicHrefs which can trigger location updates and hence the loop gets triggered.

By running the navigate inside the untrack the effect no longer gets triggered by the location changes and the problem is resolved.