Add support for +types imports with React Router v7

[jdnichollsc]

Hello folks, hope you're doing well

I'm migrating a RemixJS v2 app from a monorepo with Nx to React Router v7 with Framework mode. I was checking your examples but you don't have any example using the new types for routes as they explain here in the docs https://reactrouter.com/upgrading/remix#9-update-types-for-apploadcontext, e.g:

• routes/home.tsx:

import { data } from 'react-router';
import type { Route } from "./+types/home"; // how can we support this generated react router types here?

export const loader = ({}: Route.LoaderArgs) => {
  return data({ message: 'Ok' }, { status: 202 });
};

export default function Home({ loaderData, actionData }: Route.ComponentProps) {
  const { message } = loaderData
}

Also, what's the best way to be able to use path alias as well? e.g from my old remixjs app:

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "paths": {
      "~/*": ["app/*"],
      "@projectx/models": ["../../libs/models/src/index.ts"],
      "@projectx/email": ["../../libs/backend/email/src/index.ts"],
    },
    // Remix takes care of building everything in `remix build`.
    "noEmit": true
  },
  "include": [],
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    }
  ]
}

This is the repo of this old remixjs v2 app: https://github.com/proyecto26/projectx/blob/develop/apps/web/tsconfig.json#L18

Any help is really appreciated! <3

[jdnichollsc]

I added this manually but please let me know folks if there's a better way to manage that:

• apps/web/tsconfig.app.json

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    ...
    "rootDir": ".", // changed from "app" to "."
    "rootDirs": [".", "./.react-router/types"],
  },
  "include": [
    ...
    "**/.react-router/**/*.ts",
    "**/.react-router/**/*.tsx"
  ],
...

• apps/web/package.json

...
  "nx": {
    "name": "web",
    "targets": {
      "generate-types": {
        "executor": "nx:run-commands",
        "options": {
          "command": "react-router typegen",
          "cwd": "apps/web"
        }
      }
    }
  },
...

• package.json

...
  "scripts": {
    ...
    "typecheck:web": "nx run web:generate-types"
  },
...

[dougdelabrida]

Any luck on this @jdnichollsc ?

[flo-sch]

Would love to either see the typegen target doing this automatically, or as a separate typegen target, configured as a default dependency to the typecheck target, in the react-router plugin.

Just linking this issue as well: nrwl/nx#31354