#createLazyFileRoute missing types ?

1 messages · Page 1 of 1 (latest)

tepid musk
#

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 ?

image.png
late bough
#

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

balmy ginkgo
#

Yep, only components can be code-split

tepid musk
#

Thanks for the info. Can you give an example?

balmy ginkgo
tepid musk
#

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 ?

real onyx
# tepid musk I did but i don't think i found what i need. What i have is a login page with m...

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
  ...

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

#

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.

tepid musk
#

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 ?

real onyx
#

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.

tepid musk
#

Ok, thanks. This is what i was looking for

#

I though we had to always render something

edgy oyster
#

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

tepid musk
#

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

edgy oyster
#

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

tepid musk
#

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

edgy oyster
#

acessible?

#

do you want to hide the code?

tepid musk
#

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

edgy oyster
#

ah ok, then I totally misunderstood you

#

so then I ask again: what is exactly missing on the docs?

tepid musk
#

well, what do i wanted to do?

#

check the docs and see if it's clear enough for my case

edgy oyster
#

maybe another example would help?

tepid musk
#

example is simple

edgy oyster
#

I am just asking because we had similiar questions come up

tepid musk
#

ok let me explain then

edgy oyster
#

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

tepid musk
#

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

edgy oyster
#

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

tepid musk
#

dont think so

#

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

edgy oyster
#

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

tepid musk
#

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

edgy oyster
#

ok

tepid musk
#

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

edgy oyster
#

this is lazy loading, you are correct

#

in your example you did not mention the "not having to load the code" part

tepid musk
#

i did

edgy oyster
#

that's why I was asking

#

oh you did

#

I was not reading closely

#

sorry

tepid musk
#

np

edgy oyster
#

too late for me 😄

tepid musk
#

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 😅

edgy oyster
#

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

tepid musk
#

yeah something like that

edgy oyster
#

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

tepid musk
#

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