T
TanStack•3y ago
rival-black

Types for component in lazy loaded components

To lazy-load a component it needs to be defined in a separate file ( or does it?), therefore you cannot automatically infer the type of the component props, like useContext(). I currently have not found a way to receive the type of those without self-reference errors or extracting the types manually. I found this issue already but that is not a solution. https://github.com/TanStack/router/discussions/656 What should I do if I have a big component that needs to access the context like this: 
export const lazyRoute = new Route({
    getParentRoute: () => rootRoute,
    path: "lazy",
    beforeLoad() {
        return {
            session: { id: "whatever" },
        };
    },
    component: lazyRouteComponent(() => import("./LazyRoute")),
});

// in the other file:

export default function LazyRoute({ useContext }: any) { // <- the any should go away :(
    // Type is obviously not inferred
    const { session } = useContext();

    // does not matter
    return <></>;
}
export const lazyRoute = new Route({
    getParentRoute: () => rootRoute,
    path: "lazy",
    beforeLoad() {
        return {
            session: { id: "whatever" },
        };
    },
    component: lazyRouteComponent(() => import("./LazyRoute")),
});

// in the other file:

export default function LazyRoute({ useContext }: any) { // <- the any should go away :(
    // Type is obviously not inferred
    const { session } = useContext();

    // does not matter
    return <></>;
}
GitHub
Route Types outside of route definotions · TanStack router · Discus...
Great project here , am trying to go through the examples to make sense of it all, was wonderung if theres a way to get the types of the props passed into the component outside f the route definiti...
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?