redirects thrown in the __root beforeLoad aren't showing the correct route on first-load

[maksymskuibida]

Describe the bug

I am facing an issue on admin panel I am developing now. Sometimes, I cannot find exact steps to reproduce it just returns nothing in Outlet. I checked all my code tree and there is no chance it is bug in my code. Then I reload the page and then I am facing the next issue. beforeLoad of my $lang route is called before __root.tsx beforeLoad what causes other bugs

Your Example Website or App

admin.7loc.com

Steps to Reproduce the Bug or Issue

If you want, you can 1) register here, 2) create profile in form 3) Navigate between pages on phone or with efficiency slowed down x6 + mobile mode in devtools

Expected behavior

1) When I am on some route, and there is some content, Outlet have to return it always 2) __root.tsx beforeLoad should be called before other routes beforeLoad as well, as any parent beforeLoad should be called before beforeLoad of any children

Screenshots or Videos

No response

Platform

• OS: It happens more often on phone or if I slow dows processor x6 in browser devtools
• Browser: all
• Version: 1.30.1—1.31.2

Additional context

No response

[tannerlinsley]

Please try with the latest version

Tanner Linsley On Apr 29, 2024 at 10:52 AM -0600, Maksym Skuibida @.***>, wrote:

Describe the bug I am facing an issue on admin panel I am developing now. Sometimes, I cannot find exact steps to reproduce it just return nothing in . I checked all my code tree and there is no chance it is bug in my code. Then I reload the page and then I am facing the next issue. beforeLoad of my $lang route is called before __root.tsx beforeLoad what causes other bugs Your Example Website or App admin.7loc.com Steps to Reproduce the Bug or Issue If you want, you can

1. register here,
2. create profile in form
3. Navigate between pages on phone or with efficiency slowed down x6 + mobile mode in devtools

Expected behavior

1. When I am on some route, and there is some content, Outlet have to return it always
2. __root.tsx beforeLoad should be called before other routes beforeLoad as well, as any parent beforeLoad should be called before beforeLoad of any children

Screenshots or Videos No response Platform

• OS: It happens more often on phone or if I slow dows processor x6 in browser devtools • Browser: all • Version: 1.30.1—1.31.2

Additional context No response — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: @.***>

[maksymskuibida]

1.31.2 is last available version. I am currently on it and it also happens. As root beforeLoad is called before my $lang's beforeLoad when I try to use variable from context, which I return from root beforeLoad, it is undefined. I use this variable to change lang in params, if it was changed, for example, in user object. So, I set undefined to params, what causes infinite pending state. I reload page, undefined is replacing to actual lang, but I don't know why it also falls into infinite pending and only if I reload the page for third time, it starts working. I fixed it a little bit by checking if (variable) in $lang beforeLoad, so now when Outlet returns nothing, I reload the page and it works from first reload, but the issue with calling other routes beforeLoad before __root beforeLoad still exists. And issue with Outlet returns nothing still exists.

Anyway thank you for your hard work on this project. You are doing a lot and present fixes so quick. I beleive issues will be fixed soon, because without this bugs it is perfect router

[BourqueCharles]

@maksymskuibida By any chance, are you using redirects in your beforeLoad? I had an issue similar to your's and changing the redirect function to using the navigate function "fixed" those issues.

[maksymskuibida]

@BourqueCharles Yes, I am. But this issue happens when I do no redirects. It is interesting, but on my mac it happened may be one or two times. But on my phone in happens almost every time I just navigate between my pages. Outlet returns nothing, so, I see only my layout, but content of current page is empty, I reload the page, and than I am facing an issue that root beforeLoad called later. My root beforeLoad returns computedLang, and $lang route have to redirect for it, if it is different from current. For example, if user changed language somwhere else, or somebody followed incorrect link with something incorrect instead of lang. The reason why I compute lang there is because I also use it in not found route(if somebody follows just admin.7loc.com link). I fixed id by checking for a value before redirect and also I could try to make some function for it and instead of using context, call function (which fetches data using query from backend, like user, to obtain current language). Now I am checking for a value and it works fine

But it is still not OK, that 1) Outlet returns nothing 2) __root beforeLoad is called after routes beforeLoads.

[alexhanga]

https://stackblitz.com/edit/github-shdycb-6awa91?file=src%2Froutes%2Findex.tsx

1. Try to open a page, see the url change, but no content
2. Reload page. See the correct content

[alexhanga]

@tannerlinsley This bug is related to situation that current route / can be used as a layout for new route, so it is not unmounted and router doesn't understand that it should change the layout.

After the page reload router understands that it should use different layout and doesn't use route from /

[maksymskuibida]

@tannerlinsley @SeanCassiere My issue is still not fixed. It is not redirects in my case, issue was incorrectly renamed. It is just Links. I press on link and outlet renders nothing. My layout route is rendered, but routes under it is not. And it happens only on my phone or if I slowdown performance x6. I just navigating by links in my sidebar

https://github.com/TanStack/router/assets/57814533/678687ff-4eff-409f-ab6e-49c2d61464de

[maksymskuibida]

Also it happens only one time per route per page load. So, I reloaded the page. After it every route have this issue. But if I press second time for same route, or press, for example categories and then go back to stores issue also disappears

[maksymskuibida]

I also tried to remove almost all content for this pages, leave just background and HELLO WORLD and the issue still exists. But it exists only with CPU slowdown x6 and on my phone (samsung a54). It also exists with CPU slowdown x4, but more randomly

[SeanCassiere]

Reopening this for now. I've tested this without some layout routes and I can recreate this.

@maksymskuibida please give us a workable reproduction of this. Without a reproduction, it's hard to pinpoint the setup you've got going on and understand what is breaking this for you.

You can create a reproduction quickly on Stackblitz using the Router file-based starter.

[andrii-petlovanyi]

@SeanCassiere

I faced the same problem (as in @maksymskuibida ) in my project. I updated to the latest version but it didn't help ..(

[SeanCassiere]

I faced the same problem (as in @maksymskuibida ) in my project. I updated to the latest version but it didn't help ..(

Same as my comment above over here, need a reproduction.

[maksymskuibida]

I will try to give you a reproduction for this. But I also cannot find what actually cause this. it works on my mac m3pro, but if I slowdown CPU it does not work. And also it does not work on my samsung a54, which is not very powerful, but also it is not slow device, so, I don't know what actually cause this

Reopening this for now. I've tested this without some layout routes and I can recreate this.

@maksymskuibida please give us a workable reproduction of this. Without a reproduction, it's hard to pinpoint the setup you've got going on and understand what is breaking this for you.

You can create a reproduction quickly on Stackblitz using the Router file-based starter.

[maksymskuibida]

@SeanCassiere I am not able to make minimal reproductable example. I am facing this on my real app, but I cannot reproduce it in small example. It would be perfect, if you can share your recreation, so I can test is the same, as my issue on real app

[maksymskuibida]

@SeanCassiere But, if it can help, I can make test account on my production app and give you credentials to test it there. Probably it could also help with undefined context issue #1531

[SeanCassiere]

@maksymskuibida The reason I'm asking for a reproduction of this issue is that I suspect it comes down to how you've configured your routes and what kind of work is happening in those routes. When testing this out using 6x CPU throttling on the layout routes section of the basic file-based example, it doesn't surface the issue, so I'm leaning towards it being something specific happening in your app which we haven't expected.

Us seeing the issue happening in your app isn't too helpful for us, since we wouldn't know what the actual configuration was and if there are any unexpected side effects which we haven't considered that are in play here. Or if it's simply a misconfiguration that was allowed in the earlier versions, but not anymore.

Your reproduction doesn't have to be a duplication of the entire app, just the way you've set up the children and the triggering of the navigation of the affected layouts. Without it, we are essentially playing a guessing game as to what's specifically affecting you.

@tannerlinsley do you have any clue as to what's happening, based on the video above?

[maksymskuibida]

I checked react tree when issue happens(first video) and then I reloaded the page and issue gone(video 2) For some reason there is Outlet(video 1) in react tree, instead of Component(video 2)

https://github.com/TanStack/router/assets/57814533/27ab2e8b-a5e1-4748-ae36-f6141973de3c

https://github.com/TanStack/router/assets/57814533/83c8c9db-80bc-4fc0-a581-127c2c83bda2

[maksymskuibida]

And here is my routes tree

As you can see, stores have no children, so there have not be any Outlet. I can also share route.ts and route.lazy.tsx of stores, they are simple.

[maksymskuibida]

@maksymskuibida The reason I'm asking for a reproduction of this issue is that I suspect it comes down to how you've configured your routes and what kind of work is happening in those routes. When testing this out using 6x CPU throttling on the layout routes section of the basic file-based example, it doesn't surface the issue, so I'm leaning towards it being something specific happening in your app which we haven't expected.

Us seeing the issue happening in your app isn't too helpful for us, since we wouldn't know what the actual configuration was and if there are any unexpected side effects which we haven't considered that are in play here. Or if it's simply a misconfiguration that was allowed in the earlier versions, but not anymore.

Your reproduction doesn't have to be a duplication of the entire app, just the way you've set up the children and the triggering of the navigation of the affected layouts. Without it, we are essentially playing a guessing game as to what's specifically affecting you.

@tannerlinsley do you have any clue as to what's happening, based on the video above?

I perfectly understand what you mean. But I don't really know what can cause it. I can share some parts of my current code, so it could be helpful. In all configuration I followed guides from docs. Version, when I started working on this app was 1.19.1 and I was updating it sometimes, when new versions were introduced

[SeanCassiere]

@maksymskuibida Copied your route-layout in this stackblitz example (using latest): https://stackblitz.com/edit/github-tluew2?file=src/routes/$lang._authorized.$profileId.lazy.tsx:L19

Could you check and make sure the path params are being passed around correctly? That's one of the only ways I could think of maybe breaking the Router by rendering the same route twice that could bork the Router.

That was the only thing I could see that'd cause any problems.

[maksymskuibida]

I checked example you've done. But it have profile/checkout page. My pages, which I havigate between is simple as stores one. They are the same, only have differences inside. Your example works on my phone and with CPU slowdown. The only reason why I started testing CPU slowdown is that my app works on mac and does not work on phone. So, I found that it is not a platform issue, because CPU slowdown on mac also makes this issue happens

[maksymskuibida]

Params looks like my, only difference that I have parseParams to ensure profileId is number and to make typescript work good. I use it with useQuery, so, I have this router configuration

import { createRouter } from "@tanstack/react-router";
import { routeTree } from "./routeTree.gen.ts";
import DefaultErrorComponent from "./DefaultErrorComponent.tsx";

export const router = createRouter({
    routeTree,
    context: {
        auth: undefined!,
        queryClient: undefined!,
        showAppAlert: undefined!,
    },
    defaultPreload: "intent",
    defaultPreloadStaleTime: 0,
    defaultErrorComponent: DefaultErrorComponent,
});

// Register the router instance for type safety
declare module "@tanstack/react-router" {
    // noinspection JSUnusedGlobalSymbols
    interface Register {
        router: typeof router;
    }
}

I also navigates between pages by using just links. I have any clue what can cause this issue

[maksymskuibida]

I cannot share all my code here, but, by any chance, if you have time, probably we can make google meet, so I can show you my routes configurations and all you need

[maksymskuibida]

@tannerlinsley @SeanCassiere I managed to find out what causes an issue. It is lazy routes in combination with loaders, so, when you have both route.ts and route.lazy.tsx. And I managed to create reproductable example. It happens not every time in my example, unlike my app, but in few attempts it is possible to catch it. It looks like that sometimes lazy route file does not load in time and route thinks that there is no component and renders outlet. It is just the same as in my videos above, when Outlet rendered instead of route's component. But in my example it is easier to reproduce an issue with both CPU and network slowed down, may be due to smaller project size. So, here is my stackblitz: https://stackblitz.com/edit/github-klgefm-zvib9i?file=src%2Fmain.tsx.

To reproduce 1) Slowdown CPU x6, disable cache, slowdown network as slow 3G 2) Make sure you are on the home or about page 3) Reload the page. 4) Go to posts 5) Pick a post 6) Press tab1 or tab2 below 7) If issue does not happen, make this steps again. I need 1-3 attempts to make this issue happen

[maksymskuibida]

It is also easier to work with issue if you open stackblitz preview in separated browser tab

[maksymskuibida]

I also found out that removing defaultPreload: "intent" in router configuration make this issue not to happen

[maksymskuibida]

So, the issue happens with defaultPreload: "intent", routes, that have both route.ts and route.lazy.tsx and slow internet/device.

Probably router does not wait until lazy route loaded and "thinks" that there is no component defined for router

[maksymskuibida]

@SeanCassiere @tannerlinsley whay is about this issue? I have provided reproduction above in comment, but the issue still has information needed label

[SeanCassiere]

@maksymskuibida label has been changed 👍🏼

[maksymskuibida]

Thank you very much. I am very waiting for this fix, as it is, together with undefined context, are only issues I have with tanstack router now. In any other aspect, it is a perfect framework

[maksymskuibida]

@SeanCassiere @tannerlinsley I have just updated to the latest version, as I saw that something with lazy was changed in 1.31.27(looks not 100% related), but this issue still happens. Outlet still appears instead of Component. Did you have any change to check it?

[maksymskuibida]

Unfortunately, I had to remove lazy routes usage and it works fine, but I would love to come back to using it, once this issue fixed