nursing-lime

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()

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

TanStack•3y ago

nursing-lime

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()

useContext()

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

Types for component in lazy loaded components

Similar Threads

Types for component in lazy loaded components

Similar Threads

Similar Threads

Similar Threads