Error "Invariant failed: Could not find match for from" when layout + file-based routing is used

[Dharmang92]

Which project does this relate to?

Router

Describe the bug

When trying to use the layout routing file, the routes created are correct but when trying to open one of the route using <Link /> component, it fails to load or when trying to refresh the page which is already on the failed route.

Your Example Website or App

https://stackblitz.com/edit/tanstack-invariant-bug

Steps to Reproduce the Bug or Issue

1. Click on About or Dashboard link
2. Error is thrown

Expected behavior

I should be able to properly add a layout routing file and the nested components should work correctly.

For example below routes:

app/home app/about app/dashboard

I have route.tsx (default pattern for layout file) file inside app folder which contains the nav bar, then /home, /about and /dashboard should have the nav bar present in them.

Screenshots or Videos

Platform

"@tanstack/react-router": "^1.116.0" "@tanstack/router-plugin": "^1.116.1"

Additional context

No response

[schiller-manuel]

your example has a basepath 'app' configured AND your routes are inside an app folder. So the runtime URL would be /app/app/.. Probably not what you want? Either remove the basepath or move the routes outside of the app folder

[Dharmang92]

Is there any specific change in the latest version cause the same code works for v1.102.5? If I remove the basepath, is there any way to directly redirect to /app always?

[schiller-manuel]

throwing a redirect to /app in __root's beforeLoad could work

[Dharmang92]

Thank you for the quick response @schiller-manuel, I tested this out but even when I add beforeLoad and removing the app folder, it still doesn't redirect to app just like how basepath would work. Also renaming the app folder to app_ doesn't work...

[Dharmang92]

+

I just want a way to do below, it's not very complex as far as the configuration goes...

1. I should be able to have an app directory (just to keep the structure of the routes in sync with the folder structure)
2. Start the application with default /app route - basically if someone lands on the root page for e.g. example.com/ then it should route to example.com/app
3. Layouting for a group of routes nested inside a folder for e.g. let's say I have a folder called auth and there's specific layout I want to use then I should be able to create route.tsx file and it should work as expected (this already exists but as you know the bug mentioned here remains and the layout doesn't work if we remove the app folder as now the layout file exists with the __root.tsx file).

throwing a redirect to /app in __root's beforeLoad could work

PS: This hungs up the page forever... I am just not able to debug the page to find the issue.

[sep2]

I just downgrade to 1.102.5, noted that in package.json you have to add exact version of the following three package otherwise it won't downgrade.

            "@tanstack/react-router": "1.102.5",
            "@tanstack/router-plugin": "1.102.5",
            "@tanstack/router-generator": "1.102.5"

Is there any specific change in the latest version cause the same code works for v1.102.5? If I remove the basepath, is there any way to directly redirect to /app always?

[schiller-manuel]

@sep2 can you please provide a complete minimal example of the issue you are encountering?

[sep2]

@schiller-manuel I believe the problem is preload() related.

When I set defaultPreloadDelay: 2000 and click the <Link /> immediately after hover, the following error shown in about 2s after I clicked

hook.js:608 Error: Invariant failed: Could not find match for from: /x/y/z
    at invariant (chunk-GSREVJY5.js?v=c8afb9eb:13:9)
    at build (@tanstack_react-router.js?v=c8afb9eb:2016:9)
    at buildWithMatches (@tanstack_react-router.js?v=c8afb9eb:2177:22)
    at RouterCore.buildLocation (@tanstack_react-router.js?v=c8afb9eb:2218:14)
    at RouterCore.preloadRoute (@tanstack_react-router.js?v=c8afb9eb:2998:25)
    at @tanstack_react-router.js?v=c8afb9eb:4639:12
    at @tanstack_react-router.js?v=c8afb9eb:4722:9

When I set defaultPreloadDelay: 10_000 and click the <Link /> immediately after hover, the same error shown in about 10s after I clicked.

In both case, the new route did load and the page did navigate to the new route, it seems nothing wrong in the page, the only ovserved error was in the console.

I'm using "@tanstack/react-router": "^1.120.2", file-base routing, react (18.3), framer-motion (11.18.2) (possibly related to https://github.com/TanStack/router/issues/2803)

For now I just use defaultPreloadDelay: 99999999 as a workaround to disable preload completely. I have not face any console error after that, but I'm worry about memory leak caused by that long delay since it likely related to some sort of setTimeout calls. If there are options to disable preloading please do let me know.

Sorry I can't provide a reproduction right now.

[GGAlanSmithee]

Also hitting this. In my case, I want to run preload, is there any way around this?

[schiller-manuel]

@GGAlanSmithee please provide a minimal complete example

[GGAlanSmithee]

@schiller-manuel I tried to create a simpler, isolated reproduction, but wasn't able to, so there is likely something specific to my actual codebase that plays into this. I will try to isolate it, if possible. In my situation it seems like a Route.useParams() is the offender, but I do use this hook in other places without issue, so might be something on my end in my case.

[P4R4DiSi4C]

I'm hitting this issue on all the Links of my app but only on "touch" devices. In desktop mode no warnings in browser's console, as soon as I use "Device emulation" with iPad or iPhone I get warnings on console for all links i try. "@tanstack/react-query": "^5.76.1", "@tanstack/react-router": "^1.120.3",

[sep2]

I confirm this only occured when any Link components are rendered in a touch screen, In my case, I use Chrome browser on macos to simulate an iPhone screen and the pointer was displayed by Chrome as a simulated finger touch point. I guess that why:

The preloading doesn't get a chance to trigger since before actually clicking the Link, there is no hover event in touch screen.

At the time the Link being clicked, both navigation and preloading happened and they somehow conflicted each others.

In a normal desktop browser environment, when you want to click any Link, you have to move the mouse to hover it, which causes the preloading process to trigger slightly sooner than the actuall navigation so there is no conflict observed.

@P4R4DiSi4C

I'm hitting this issue on all the Links of my app but only on "touch" devices. In desktop mode no warnings in browser's console, as soon as I use "Device emulation" with iPad or iPhone I get warnings on console for all links i try. "@tanstack/react-query": "^5.76.1", "@tanstack/react-router": "^1.120.3",

[schiller-manuel]

could you please test whether this still exists on the alpha branch?

[sep2]

@schiller-manuel I reproduced it in the official demo, please see the screenshot:

https://tanstack.com/router/latest/docs/framework/react/examples/kitchen-sink-file-based

https://stackblitz.com/github/tanstack/router/tree/main/examples/react/kitchen-sink-file-based?embed=1&theme=light&preset=node&file=src/routes/__root.tsx

[sep2]

@schiller-manuel This still occured with "@tanstack/react-router": "1.121.0-alpha.14". (not in the link below but I tested it locally)

Steps to reproduce:

https://stackblitz.com/github/tanstack/router/tree/main/examples/react/kitchen-sink-file-based?embed=1&theme=light&preset=node&file=src/routes/__root.tsx

1. Open this link in a chrome browser and wait for the preview app is fully loaded.
2. Do not move the cursor to the preview app to prevent accidentally triggering the preload.
3. Open the devtools panel and toggle the device toolbar to a mobile device (e.g. iPhone 12).
4. Make sure the cursor shape is a touch finger, not a regular cursor pointer.
5. Click one or two nagivation links in the preview, the error should occured.

[incpo]

Still no changes. Same for me

[stephen198400]

same problem

[empotts]

also running into this

[FabriBorgobello]

same issue

[jackytea]

Also seeing this on "@tanstack/react-router": "^1.121.12",

[sep2]

Edit: doesn't work anymore.

---

Anyone wants to mitigate this issue please set defaultPreloadDelay: 999999 to disable preload in DEV mode using a conditionnal statement.

[trburger]

Same issue in that an error is logged in console. That navigation actually works but wishing the error wasn't occurring and possibly other negative side effects. Don't want to disable preload as that is a major benefit Router.

post by @sep2 with the official demo and images captures the issue well.

[kein-1]

I see this issue with Link. Navigation works fine though

[trburger]

I see this issue with Link. Navigation works fine though

Correct, it navigates but the "lifecycle" (what happens downstream, resource usage, etc) could be different as a result of the error I'm not sure. I'm fairly new to router and start so learning as I go here. We have lots of Links on pages with preload enabled to 1 second by intent so this error occurs every time the user clicks a link relatively quickly and the preload hasn't occurred yet. The preload delay is to avoid unnecessarily preloads.

[kasper573]

I see this issue with Link. Navigation works fine though

Same here!

[tatwater]

In my case I was actually experiencing a bug with navigate(). I upgraded to 1.121 today and started seeing those console warnings, then noticed that in places where I called navigate({ to: ".", search: (prev) => ({ ... }), }) it would boot to the root route instead of staying on the current route. Possibly because the current route wasn't matching anything?

Reverted to pinning 1.120.20 for now, until there's a clearer path forward.

Editing to say we haven't migrated to file-based routing yet, so we're still defining our routes with createRoute() and importing all files into a routeTree.tsx manually. Maybe this older way of doing things is part of the problem? The 1.121 release notes were all-in on TS Start...

[MGRatEJOT]

Also experiencing this with v1.121.21. With v1.120.20 we get no warnings.

[alsersan]

Same here. Upgrading to v1.121.21 from v1.120.15 triggered these warning logs. However, in my case I don't see the "Invariant failed" part, probably because I'm not preloading Links (yet). This is the warning I see:

And in my case, this only happens when I'm navigating OUT of a non-nested route. I have a /building-blocks route, and then I have various other routes like /building-blocks/$blockId of /building-blocks/create/linear (the one in the picture), which are constructed like building_blocks_.whatever. If I navigate to any of the routes involving building-blocks, and I navigate out (both with links and with navigate), I get the warning. Navigation in the rest of the app throws no warnings.

I mentioned the non-nested routes because that's the only difference I can see between these routes throwing warnings, and the rest of my routes. Maybe it's not related

[eyalevy23]

Same here, using version ⁠v1.121.34 in the directory ⁠src/routes/products, I have two files: ⁠index.tsx and ⁠$productId.tsx. When navigating from the ⁠products route to the dynamic ⁠$productId route, I encounter the following warning: "Could not find match for from: /products/"