Typegen for flatRoutes doesn't seem to work

[ZeldOcarina]

I'm using React Router as a...

framework

Reproduction

Clone this repo with npm and run dev or typegen

https://github.com/ZeldOcarina/react-router-auth

System Info

System:
    OS: macOS 15.3.1
    CPU: (12) arm64 Apple M2 Max
    Memory: 4.32 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.11.0 - ~/.nvm/versions/node/v22.11.0/bin/node
    Yarn: 1.22.22 - ~/.yarn/bin/yarn
    npm: 10.9.0 - ~/.nvm/versions/node/v22.11.0/bin/npm
    bun: 1.1.39 - ~/.bun/bin/bun
    Watchman: 2025.02.17.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 133.0.6943.128
    Safari: 18.3
  npmPackages:
    @react-router/dev: ^7.1.5 => 7.1.5 
    @react-router/express: ^7.1.5 => 7.1.5 
    @react-router/fs-routes: ^7.1.5 => 7.1.5 
    @react-router/node: ^7.1.5 => 7.1.5 
    react-router: ^7.1.5 => 7.1.5 
    vite: ^5.4.11 => 5.4.14

Used Package Manager

npm

Expected Behavior

I think the types should be getting in the .react-router/types/app/+types folder but I am not seeing any, only the default root one. Maybe I am missing something?

Actual Behavior

There's no types for the existing routes.

[pcattori]

Running npm i on your repro results in:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @t3-oss/env-core@0.12.0
npm ERR! Found: valibot@0.41.0
npm ERR! node_modules/valibot
npm ERR!   valibot@"^0.41.0" from @react-router/dev@7.2.0
npm ERR!   node_modules/@react-router/dev
npm ERR!     dev @react-router/dev@"^7.1.5" from the root project
npm ERR!     peer @react-router/dev@"^7.2.0" from @react-router/fs-routes@7.2.0
npm ERR!     node_modules/@react-router/fs-routes
npm ERR!       @react-router/fs-routes@"^7.1.5" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional valibot@"^1.0.0-beta.7 || ^1.0.0" from @t3-oss/env-core@0.12.0
npm ERR! node_modules/@t3-oss/env-core
npm ERR!   @t3-oss/env-core@"^0.12.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: valibot@1.0.0-rc.2
npm ERR! node_modules/valibot
npm ERR!   peerOptional valibot@"^1.0.0-beta.7 || ^1.0.0" from @t3-oss/env-core@0.12.0
npm ERR!   node_modules/@t3-oss/env-core
npm ERR!     @t3-oss/env-core@"^0.12.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /Users/pedrocattori/.npm/_logs/2025-02-28T16_40_33_189Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/pedrocattori/.npm/_logs/2025-02-28T16_40_33_189Z-debug-0.log

[ZeldOcarina]

Hello @pcattori! Please install with --legacy-peer-deps or --force.

[pcattori]

Can't reproduce. I do get a couple typecheck errors in some of your files, but all the typegen files for routes are there.

❯ npm run typecheck

> typecheck
> react-router typegen && tsc -b

app/data/auth.server.ts:65:35 - error TS2339: Property 'findByEmail' does not exist on type 'Model<any, {}, {}, {}, any, any>'.

65   const existingUser = await User.findByEmail(email);
                                     ~~~~~~~~~~~

app/data/auth.server.ts:89:35 - error TS2339: Property 'findByEmail' does not exist on type 'Model<any, {}, {}, {}, any, any>'.

89   const existingUser = await User.findByEmail(email);
                                     ~~~~~~~~~~~

app/routes/google-callback.ts:33:37 - error TS2339: Property 'findByEmail' does not exist on type 'Model<any, {}, {}, {}, any, any>'.

33     const existingUser = await User.findByEmail(email);
                                       ~~~~~~~~~~~

Found 3 errors.

❯ tree .react-router
.react-router
└── types
    └── app
        ├── +types
        │   └── root.ts
        └── routes
            └── +types
                ├── _index.ts
                ├── activate-account.ts
                ├── app._index.ts
                ├── app.ts
                ├── app.users._index.ts
                ├── google-callback.ts
                ├── login.ts
                ├── otp-login.ts
                ├── sign-in.ts
                ├── sign-out.ts
                └── sign-up.ts

[ZeldOcarina]

Ohhh I am an idiot the types are under routes, I was looking under +types.. I am SO sorry for wasting your time.

[pcattori]

No worries! Happy to help 😁

[ZeldOcarina]

Since I am already disturbing you, would you have any suggestions for this?

Basically the route loader seems to be typed as (parameter) loaderData: {} | null. This is from https://github.com/ZeldOcarina/react-router-auth/blob/main/app/routes/app.users._index.tsx

[pcattori]

You have a : LoaderFunction annotation on your loader. This is how TS interprets that: "Oh, this function has a type already! Great, I can grab the return type directly from there, so I can ignore the entire function body and skip doing any type inference!" which isn't what we want. We do want TS to perform type inference.

So the fix is to annotate that loader's args with Route.LoaderArgs, but specifically avoid annotating the return type explicitly, which includes annotating the function itself explicitly. That way you won't block TS from performing type inference.

[ZeldOcarina]

Oh nice so I need to use LoaderFunctionArgs in RR7 and not LoaderFunction! Thanks a lot for the clarification!! 😍
I will try this right away!

[pcattori]

To be clear: if you won't care about the types for args in your loader, you can even leave out Route.LoaderArgs! This isn't a RR thing, its a TS thing. The important part is to refrain from typing the return type explicitly.

[ZeldOcarina]

Yes it makes sense. Still lots to learn. Thanks again!! :)