Comments (32)
@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
- Outlet returns nothing
- __root beforeLoad is called after routes beforeLoads.
from location.
@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?
from location.
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
from location.
from location.
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
from location.
@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.
from location.
https://stackblitz.com/edit/github-shdycb-6awa91?file=src%2Froutes%2Findex.tsx
- Try to open a page, see the url change, but no content
- Reload page. See the correct content
from location.
@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 /
from location.
@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
Sequence.01.mp4
from location.
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
from location.
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
from location.
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.
from location.
I faced the same problem (as in @maksymskuibida ) in my project. I updated to the latest version but it didn't help ..(
from location.
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.
from location.
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.
from location.
@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
from location.
@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
from location.
@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?
from location.
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)
empty.outlet.react.tree.mov
content.OK.react.tree.mov
from location.
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.
from location.
@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
from location.
@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.
from location.
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
from location.
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
from location.
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
from location.
@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
- Slowdown CPU x6, disable cache, slowdown network as slow 3G
- Make sure you are on the home or about page
- Reload the page.
- Go to posts
- Pick a post
- Press tab1 or tab2 below
- If issue does not happen, make this steps again. I need 1-3 attempts to make this issue happen
from location.
It is also easier to work with issue if you open stackblitz preview in separated browser tab
from location.
I also found out that removing defaultPreload: "intent" in router configuration make this issue not to happen
from location.
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
from location.
@SeanCassiere @tannerlinsley whay is about this issue? I have provided reproduction above in comment, but the issue still has information needed label
from location.
@maksymskuibida label has been changed 👍🏼
from location.
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
from location.
Related Issues (20)
- A component suspended while responding to synchronous input in version 1.31.9 HOT 16
- In Memory Router requires links be pressed multiple times after history.back() is called
- `navigate` functions without `to` but with `search` causes a route error inside a layout route. HOT 5
- Router.status is always "pending" when you wrap the `RouterProvider` in `StrictMode`. HOT 1
- Error when startin. (I have seen it's also on the docs examples) HOT 14
- using React.StrictMode breaks the useMatchRoute hook HOT 2
- 1.31.23 produces `Something went wrong error` HOT 2
- version 1.31.23 has a bug HOT 2
- Preloaders affecting current route HOT 1
- blank screen triggered on direct visit by beforeLoad calls in StrictMode with trailingSlash set to 'never' or 'always' HOT 1
- Loader context is undefined after redirect
- `route.tsx` changes whether trailing slashes are required in links to `index.tsx` HOT 4
- PendingComponent isn't shown while beforeLoad is pending on root route
- Context not getting updated in beforeload of router HOT 9
- Type error of the prop “to” Link component HOT 2
- useRouter() doesn't match all active routes HOT 5
- Update npmjs README HOT 1
- Since v1.31.0, type `TrailingSlashOption` is not exported, causing "The inferred type...cannot be named" TS errors when using "NodeNext" resolution in a composite project
- Layout Route Contexts NOT being set on non-initial redirects in beforeLoad() HOT 4
- Hoverling links with defaultPreload: "intent" causes 2 rerenders of tree, one with missing current route context HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from location.