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 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 #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?