rare-sapphire

"Error: Invariant failed: Could not find match for from: /posts" + "Error preloading route! ☝"

Hey! Whenever I simulate different viewport in the browser, I'm getting warnings with errors in the title whenever I go into /post/$postId route from /posts while the fetch with $postId is not yet finished. This warning is not displayed at all when I don't simulate the viewports. I've tested this on multiple viewports but the warning is displayed every time. Everything seems to be working just fine but I'm not sure if it's safe to ignore this warning or not. Here's the minimal reproduction link: https://stackblitz.com/edit/tanstack-router-ijhtsvaj?file=src%2Froutes%2Fposts_.%24postId.tsx. I've made minimal changes to posts_.$postId.tsx, and I've increased the sleep in postQueryOptions to 2000ms. You'll have to open the preview in new tab to see the console. I've also added a video showcasing the problem to make it simpler to understand 🫡

38 Replies

provincial-silver•8mo ago

i just tried to reproduce this in firefox, but was not able to

sunny-green•8mo ago

Ah, just ran into this and can reproduce (Chrome and Firefox). Exactly as described above — I have a list of things declared on a "ideas.mine" route. When navigating to a post by way of <Link to="ideas/$id" params={ id: "123" }>Sample post</Link> from the list before its respective loader has resolved (triggered earlier by intent), I see the error:

hook.js:608 Error: Invariant failed: Could not find match for from: /ideas/mine
    at invariant (tiny-invariant.js:12:11)
    at build (router.ts:1464:7)
    at buildWithMatches (router.ts:1685:20)
    at Router.buildLocation (router.ts:1736:12)
    at Router.preloadRoute (router.ts:2805:23)
    at utils.ts:602:12
    at utils.ts:708:19

hook.js:608 Error: Invariant failed: Could not find match for from: /ideas/mine
    at invariant (tiny-invariant.js:12:11)
    at build (router.ts:1464:7)
    at buildWithMatches (router.ts:1685:20)
    at Router.buildLocation (router.ts:1736:12)
    at Router.preloadRoute (router.ts:2805:23)
    at utils.ts:602:12
    at utils.ts:708:19

If I let the respective preloaded data finish loading and then navigate, no error.

ambitious-aqua•8mo ago

Do you reproduce this outside of stackblitz? Because sometimes having the devtools open in stackblitz messes up things

sunny-green•8mo ago

I am reproducing it outside of stackblitz... actually just learned about stackblitz.

provincial-silver•8mo ago

if someone can create a failing unit / e2 test for this, we might be able to fix this quickly

fascinating-indigo•7mo ago

Hello, I am facing the same problem. I just upgraded the packages from "@tanstack/react-router": "^1.102.1", "@tanstack/start": "^1.102.2" to "@tanstack/react-router": "^1.112.18", "@tanstack/react-start": "^1.112.18". Any hint of what could be the problem? Uncaught Error: Invariant failed: Could not find match for from: /circles/$activeElement/$type

fascinating-indigo•7mo ago

Here is the more detail error I am getting

provincial-silver•7mo ago

are you using Route.useNavigate or similar here? the error hints at that you are trying to navigate with a from that is currently not rendered

fascinating-indigo•7mo ago

Indeed. Using it like this: const navigate = useNavigate({ from: '/circles/$activeElement/$type' }) But it has been working well until the upgrade. Is there any breaking changes that I am not aware of? Or any different way to implement the same thing?

provincial-silver•7mo ago

it's more likely you have an issue that now is apparent is the route currently rendered that you specified as from here?

fascinating-indigo•7mo ago

so basically I am navigating from '/circles' to '/circles/$activeElement/$type' and the reason why I added the from: '/circles/$activeElement/$type' is to get the typesafety of the params. But If I cant do this way, then I do not understand what's the way to do it

fascinating-indigo•7mo ago

This is my routes folder, if it helps to have the overview

provincial-silver•7mo ago

should be to then? instead of from

fascinating-indigo•7mo ago

I dont think the to is exposed on the useNavigate when importing it from @tanstack/react-router

Object literal may only specify known properties, and 'to' does not exist in type '{ from?: FromPathOption<Router<Route<any, "/", "/", string, "root", undefined, {}, { queryClient: QueryClient; }, AnyContext, AnyContext, {}, undefined, RootRouteChildren, FileRouteTypes>, TrailingSlashOption, boolean, RouterHistory, Record<...>>, string> | undefined; }'.ts(2353)

provincial-silver•7mo ago

no, but it is on the navigate function that you get back

const navigate = useNavigate()
navigate({ to:"..."})

const navigate = useNavigate()
navigate({ to:"..."})

fascinating-indigo•7mo ago

So this is how I have it implement it

const navigate = useNavigate({ from: '/circles/$activeElement/$type' })
  
  const shouldNavigateToBaseCircle = isCurrentPageAboutCircle && activeElement === elementId

  navigate({
    to: shouldNavigateToBaseCircle ? '/circles' : '/circles/$activeElement/$type/about',
    params: shouldNavigateToBaseCircle ? {} : { activeElement: elementId, type },
    replace: false
  })

const navigate = useNavigate({ from: '/circles/$activeElement/$type' })
  
  const shouldNavigateToBaseCircle = isCurrentPageAboutCircle && activeElement === elementId

  navigate({
    to: shouldNavigateToBaseCircle ? '/circles' : '/circles/$activeElement/$type/about',
    params: shouldNavigateToBaseCircle ? {} : { activeElement: elementId, type },
    replace: false
  })

should I just remove the from within the useNavigate?

provincial-silver•7mo ago

just dont pass from into useNavigate yes or use the correct one

fascinating-indigo•7mo ago

ok, got it.

provincial-silver•7mo ago

of the route where that is rendered

fascinating-indigo•7mo ago

working now 🙂 Thanks Manuel. I think I picked that from an example and perhaps it was not best practice or perhaps old practice

provincial-silver•7mo ago

no it was never correct to specify an incorrect from it was not validated previously in all cases, but now is

foreign-sapphire•7mo ago

I have the same problem but without any 'from' param.

  <NavigationMenu>
    <NavigationMenuList>
      <NavigationMenuItem>
        <Link to="/admin/bids">
          <NavigationMenuLink>
            <Building2 className="mr-2 h-4 w-4" />
            Marchés
          </NavigationMenuLink>
        </Link>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <Link to="/admin/partial-bids">
          <NavigationMenuLink>
            <Building2 className="mr-2 h-4 w-4" />
            Partiels
          </NavigationMenuLink>
        </Link>
      </NavigationMenuItem>

  <NavigationMenu>
    <NavigationMenuList>
      <NavigationMenuItem>
        <Link to="/admin/bids">
          <NavigationMenuLink>
            <Building2 className="mr-2 h-4 w-4" />
            Marchés
          </NavigationMenuLink>
        </Link>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <Link to="/admin/partial-bids">
          <NavigationMenuLink>
            <Building2 className="mr-2 h-4 w-4" />
            Partiels
          </NavigationMenuLink>
        </Link>
      </NavigationMenuItem>

provincial-silver•7mo ago

can you reproduce this in a minimal example?

foreign-sapphire•7mo ago

It seems that changing the file organisation to this fixes the issue

foreign-sapphire•7mo ago

I can't atm sorry

provincial-silver•7mo ago

is there no index route somewhere?

fascinating-indigo•7mo ago

@Manuel Schiller would it make sense to change this error into a warning instead? I understand the validation needs to happen, but does it make sense that the user can’t navigate? Since it throws an error, the navigation does not happen. What would be the impact of logging a warning instead and allowing the navigation to happen? And also wondering if the message should be more clear of why it is happening rather than saying it is not matching.

provincial-silver•7mo ago

we need to error as this could result in a totally wrong route being navigated to with wrong params etc

adverse-sapphire•7mo ago

We also just ran into this issue, where we have a bunch of guards/redirects that take in from, but it fails during preload, since the current from does not match that of the route Simple example:

export const Route = createFileRoute('/accounts/$accountId/settings/')({
  beforeLoad: () => {
    throw redirect({
      to: './overview',
      from: Route.fullPath,
      replace: true,
    })
  },
})

export const Route = createFileRoute('/accounts/$accountId/settings/')({
  beforeLoad: () => {
    throw redirect({
      to: './overview',
      from: Route.fullPath,
      replace: true,
    })
  },
})

But we also have conditional examples that throw a redirect if the user doesn't have permissions. Easiest is to just turn off preloading everywhere, but that feels like we're missing out. The alternative is to sprinkle all these checks with context.preload and early returns 😦

provincial-silver•7mo ago

can you please create a GitHub issue with a complete minimal example?

adverse-sapphire•7mo ago

I can do it if you think this is unintended behaviour? 😇

provincial-silver•7mo ago

for redirects thrown during preload yes

continuing-cyan•6mo ago

I had this issue many time yesterday, it had to do with the from used on the useSearch

provincial-silver•6mo ago

so you used an incorrect from?

continuing-cyan•6mo ago

yes, incorrect from that no longer align with the routes directory. what was disturbing is that, it has nothing to do with the current page i was working on.

provincial-silver•6mo ago

what does that mean?

continuing-cyan•6mo ago

yeah hard to articulate, bottom line, when this error occures, best to investigate the form parameter from useSearch or useNavigate....

provincial-silver•6mo ago

or Link

Gaming

Programming

"Error: Invariant failed: Could not find match for from: /posts" + "Error preloading route! ☝"

Did you find this page helpful?