T
TanStack•2y ago
national-gold

Router Context Error: Property does not exist on type {}

I have defined a custom interface for my router context and I'm creating my root route using createRootRouteWithContext<MyRouterContext> as per the docs (as far as I can tell) but in my route loader I'm getting the error: "Property academicYear does not exist on type {}" where academicYear is one of the properties defined in my interface.
2 Replies
xenial-black
xenial-black•2y ago
I have the same issue. There is even an issue on Github, which I think comes down to the same problem. https://github.com/TanStack/router/issues/1126 I was looking at the code of TSR, trying to figure out why this happens. I think it comes down to this: https://github.com/TanStack/router/blob/d6d7a3e4898e02addd00a2a13ebdb36d0c0b90ff/packages/react-router/src/route.ts#L1067 
// within createRootRouteWithContext()()
return createRootRoute<
  TSearchSchemaInput,
  TSearchSchema,
  TSearchSchemaUsed,
  TRouteContextReturn,
  TRouteContext,
  TRouterContext
>(options as any)
// within createRootRouteWithContext()()
return createRootRoute<
  TSearchSchemaInput,
  TSearchSchema,
  TSearchSchemaUsed,
  TRouteContextReturn,
  TRouteContext,
  TRouterContext
>(options as any)
createRootRoute actually has two more generics: TLoaderDeps and TLoaderData, which did not get passed through by createRootRouteWithContext. I guess this is the reason why the rootRoute does not have access to it's loader's types. As far as I can tell the fix for this should be trivial: 
// within createRootRouteWithContext()()
return createRootRoute<
  TSearchSchemaInput,
  TSearchSchema,
  TSearchSchemaUsed,
  TRouteContextReturn,
  TRouteContext,
  TRouterContext,
  // Add these two lines:
  TLoaderDeps,
  TLoaderData
>(options as any)
// within createRootRouteWithContext()()
return createRootRoute<
  TSearchSchemaInput,
  TSearchSchema,
  TSearchSchemaUsed,
  TRouteContextReturn,
  TRouteContext,
  TRouterContext,
  // Add these two lines:
  TLoaderDeps,
  TLoaderData
>(options as any)
Also I don't see the reason for as any being needed here. @Tanner Linsley Sorry for mentioning you. Does this sound reasonable to you? I am happy to add a small PR for this, if that helps you!
GitHub
invalid type inference for loader data of a route instantiated with...
Describe the bug Type inference doesn't work for loader data returned from useLoaderData() method call on a route instantiated with createRootRouteWithContext(). Your Example Website or App htt...
GitHub
router/packages/react-router/src/route.ts at d6d7a3e4898e02addd00a2...
🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router
deep-jade
deep-jade•2y ago
fixed in https://github.com/TanStack/router/releases/tag/v1.15.19
GitHub
Release v1.15.19 · TanStack/router
Version 1.15.19 - 2/5/2024, 7:33 PM Changes Fix pass types to createRootRoute from createRootRouteWithContext (#1154) (0272c9c) by orlik Packages @tanstack/react-router@1.15.19 @tanstack/router-...

Did you find this page helpful?