How to make Route.LoaderArgs context type safe?

[davidbielik]

Following the type safety article

import type { Route } from "./+types/product";
// types generated for this route 👆

export function loader({ params, context }: Route.LoaderArgs) {
  //                      👆 { id: string }
 // context is unknown 
  return { planet: `world #${params.id}` };
}

export default function Component({
  loaderData, // 👈 { planet: string }
}: Route.ComponentProps) {
  return <h1>Hello, {loaderData.planet}!</h1>;
}

How do I set the type to be used for the Route.LoaderArgs context property?

Route.LoaderArgs<ContextType> isn't a generic

Type 'LoaderArgs' is not generic.ts(2315)

[sergiodxa]

The context object is typed with the interface AppLoadContext, you can overwrite it using declaration merging, in a .ts or .d.ts file do

import "react-router";
declare module "react-router" {
  interface AppLoadContext {
    // add things here
  }
}

[davidbielik]

Thanks!

[gustavopch]

If you use "moduleResolution": "nodenext", you'll need this patch:

diff --git a/node_modules/react-router/package.json b/node_modules/react-router/package.json
index bdaf663..a3eb8b7 100644
--- a/node_modules/react-router/package.json
+++ b/node_modules/react-router/package.json
@@ -24,7 +24,7 @@
   "exports": {
     ".": {
       "node": {
-        "types": "./dist/development/index.d.ts",
+        "types": "./dist/development/index.d.mts",
         "module-sync": "./dist/development/index.mjs",
         "default": "./dist/development/index.js"
       },

Without this, the AppLoadContext that you augment is actually not the same AppLoadContext used by React Router internally.

[sergiodxa]

I think any app being bundled by Vite should be using "moduleResolution": "bundler"