extended-salmon

createLazyFileRoute missing types ?

I want to use createLazyFileRoute with beforeLoad, but that prop doesn't exist on this function. Is this a bug? Or there is another way to do it ?

40 Replies

generous-apricot•2y ago

I believe the beforeLoad function is available to the non-lazy version of the function You either make the full component non-lazy Or move the beforeLoad function only to non-lazy version of the function and it will get wired up

initial-rose•2y ago

Yep, only components can be code-split

extended-salmonOP•2y ago

Thanks for the info. Can you give an example?

initial-rose•2y ago

Have you read the guide on code splitting? https://tanstack.com/router/latest/docs/framework/react/guide/code-splitting

Code Splitting | TanStack Router Docs

Code splitting and lazy loading is a powerful technique for improving the bundle size and load performance of an application. Reduces the amount of code that needs to be loaded on initial page load

extended-salmonOP•2y ago

I did but i don't think i found what i need. What i have is a login page with multiple components, like the login form, reset password and stuff like that, and a dashboard. What i want to do is to code split the login and the dashboard so everything doesn't go in the same bundle. But also would love to check if user data exists or not before loading those one of those components. How would you approach this ?

fascinating-indigo•2y ago

Assuming you want to want both the Critical Route Configuration (beforeLoad, loaders, validateSearch, etc.) as well as code-splitting of your Non-Critical/Lazy Route Configuration (component, pendingComponent, errorComponent, etc.), you'd be able to achieve what you are looking for with this routing file structure.

src/routes
  index.tsx
  dashboard.tsx <- Critical Route Configuration
  dashboard.lazy.tsx <- Non-Critical/Lazy Route Configuration
  ...

src/routes
  index.tsx
  dashboard.tsx <- Critical Route Configuration
  dashboard.lazy.tsx <- Non-Critical/Lazy Route Configuration
  ...

The definition between the two types of route configurations are covered here: https://tanstack.com/router/latest/docs/framework/react/guide/code-splitting#how-does-tanstack-router-split-code With the usage of the .lazy suffix over here: https://tanstack.com/router/latest/docs/framework/react/guide/code-splitting#using-the-lazytsx-suffix

Code Splitting | TanStack Router Docs

Code splitting and lazy loading is a powerful technique for improving the bundle size and load performance of an application. Reduces the amount of code that needs to be loaded on initial page load

fascinating-indigo•2y ago

You aren't able to code-split out your Critical Route Configuration, because like the name suggests is it important. Without it your Router would be booting up without knowing the actual route-tree.

extended-salmonOP•2y ago

Thanks, i thing i get it now. The only thing i'm missing is, if i'm using the "same" filename, what component would i render in the critical route configuration? just an outlet ?

fascinating-indigo•2y ago

Your critical route configuration doesn't need to render anything in the component field at all. Since the actual component for the route would get lazy loaded in.

extended-salmonOP•2y ago

Ok, thanks. This is what i was looking for I though we had to always render something

wise-white•2y ago

should we maybe enhance the documentation here? what was really missing?

extended-salmonOP•2y ago

i think so, at least from my perspective docs don't make you think in this way but basically i wanted to used both fileroute and lazyroute, but having fileroute having a condition to only load the lazy route for example: i have a dashboard and login page. if user doesnt exist i want only the login page to "exist" and vice-versa

wise-white•2y ago

sorry I did not get this, what's a file route? ah I would not do it this way by lazy loading in router we mean: the bundle is split, but the route exists you want to modify the routetree at runtime this is possible, but I would avoid it since you will loose type safety instead, I would check in the route's beforeLoad whether it should actually "exist", if not, then throw a redirect to some fallback page

extended-salmonOP•2y ago

what i meant with exist, i was talking about having the js accessible at that time. maybe i wasn't clear enough.

wise-white•2y ago

acessible? do you want to hide the code?

extended-salmonOP•2y ago

i'm talking about the code splitting if you dont lazy load anything you will have a bigger js bundle without any splits and what i wanted to have was the ability to lazy load, but before accessing that lazy load code, i wanted to use the beforeLoad function from the createFileRoute but Sean already told me what i needed to do

wise-white•2y ago

ah ok, then I totally misunderstood you so then I ask again: what is exactly missing on the docs?

extended-salmonOP•2y ago

well, what do i wanted to do? check the docs and see if it's clear enough for my case

wise-white•2y ago

maybe another example would help?

extended-salmonOP•2y ago

example is simple

wise-white•2y ago

I am just asking because we had similiar questions come up

extended-salmonOP•2y ago

ok let me explain then

wise-white•2y ago

and for us it's often hard to understand the missing pieces of the docs, since we ... know how all works

extended-salmonOP•2y ago

i know, that is why i asked what i wanted and for you to check the docs if you have the solution but let me explain the problem and then see if the solution is in the docs the problem is this: i have an app with 2 pages dashboard and login dashboard -> only have access if login successful, otherwise user can't enter login page -> only "exists" if the user haven't signed in before loading any of those pages to the user, i want to check if the user has access to one of them. if the user has access to the dashboard, only the dashboard code should be loaded. vice-versa for the login which in this case means, i need to lazy load both dashboard and login

wise-white•2y ago

i still think you have a different definition of lazy loading the we do

extended-salmonOP•2y ago

dont think so i only want the user to download the js code when he wants to access something

wise-white•2y ago

in your example, why do you care about the bundle being split?

extended-salmonOP•2y ago

i dont want the user to download the js of the login page if he is not using it

wise-white•2y ago

extended-salmonOP•2y ago

isn't this lazy loading ? or am i mistaken ?

wise-white•2y ago

this is lazy loading, you are correct in your example you did not mention the "not having to load the code" part

extended-salmonOP•2y ago

i did

wise-white•2y ago

that's why I was asking oh you did I was not reading closely sorry

extended-salmonOP•2y ago

wise-white•2y ago

too late for me 😄

extended-salmonOP•2y ago

but do you see my problem now ? if not asking much check the docs about this part and see if its clear enough at least for me it wasn't 😅

wise-white•2y ago

so I think we should add an example that has both foo.tsx and foo.lazy.tsx

extended-salmonOP•2y ago

yeah something like that

wise-white•2y ago

to demonstate a loader / beforeLoad in combination with a lazily loaded component

extended-salmonOP•2y ago

exactly, that's it these things kind hard to explain 😅 because from my perspective i should be able to call the lazyload function and the before load should be available, but i understand that is not possible i was trying to mimick what i did before with react router. but the beforeLoad part i would do that in the route file but here things work different anyway thanks for the help

Gaming

Programming

createLazyFileRoute missing types ?

Did you find this page helpful?