metropolitan-bronze

Update from 1.48.4 to 1.51.2 broke typesafe route prop

Hey everyone! I have a context provider that takes some props for config, one of which I want to enforce to be a valid, existing route in my routeTree. Here's how I accomplished that before this upgrade:

// WizardContext.ts
export interface WizardContextValue<TTo extends string = "."> {
  closeTo: LinkOptions<RegisteredRouter["routeTree"], "/", TTo>["to"];
  ...
}

export const WizardContext = createContext<WizardContextValue | null>(null);

// WizardContext.ts
export interface WizardContextValue<TTo extends string = "."> {
  closeTo: LinkOptions<RegisteredRouter["routeTree"], "/", TTo>["to"];
  ...
}

export const WizardContext = createContext<WizardContextValue | null>(null);

// WizardProvider.tsx
export default function WizardProvider<TTo extends string = ".">(props: {
  children: ReactNode,
  closeTo: LinkOptions<RegisteredRouter["routeTree"], "/", TTo>["to"];
  ...
}) {
  ...
  
  return (
    <WizardContext.Provider
      value={{
        closeTo: props.closeTo,
        ...
      }}
    >
      {props.children}
    </WizardContext.Provider>
  );
}

// WizardProvider.tsx
export default function WizardProvider<TTo extends string = ".">(props: {
  children: ReactNode,
  closeTo: LinkOptions<RegisteredRouter["routeTree"], "/", TTo>["to"];
  ...
}) {
  ...
  
  return (
    <WizardContext.Provider
      value={{
        closeTo: props.closeTo,
        ...
      }}
    >
      {props.children}
    </WizardContext.Provider>
  );
}

After upgrading to v1.51.2, value.closeTo in <WizardContext.Provider> has a type error which reads:

Type '((ToPathOption<any, "/", TTo> & {}) | undefined) & SearchParamOptions<any, "/", TTo>["to"] & PathParamOptions<any, "/", TTo>["to"]' is not assignable to type '"." | undefined'.
  Type 'CheckPath<any, TTo, never, "/", TTo> & {} & SearchParamOptions<any, "/", TTo>["to"] & PathParamOptions<any, "/", TTo>["to"]' is not assignable to type '"." | undefined'.

Type '((ToPathOption<any, "/", TTo> & {}) | undefined) & SearchParamOptions<any, "/", TTo>["to"] & PathParamOptions<any, "/", TTo>["to"]' is not assignable to type '"." | undefined'.
  Type 'CheckPath<any, TTo, never, "/", TTo> & {} & SearchParamOptions<any, "/", TTo>["to"] & PathParamOptions<any, "/", TTo>["to"]' is not assignable to type '"." | undefined'.

If I change the type param passed into WizardProvider it's reflected in the error, i.e. export default function WizardProvider<TTo extends string = "/">(props: { shows the same errors with "not assignable to type '"/" | undefined'," but I'm not familiar enough with how the router is typed to understand how to fix this on my own! TLDR; I would like to be able to define a <WizardProvider closeTo="/success"> and enforce that /success is a route that exists in the routeTree Would love some guidance. Thank you for your help!

12 Replies

passive-yellow•13mo ago

if it's just "enforce that /success is a route that exists in the routeTree" then you can use

type ValidPaths = RoutePaths<RegisteredRouter['routeTree']>

type ValidPaths = RoutePaths<RegisteredRouter['routeTree']>