Skip to content

Accessing matches causes TS error on route component declared as an arrow function which uses typegen Route type #12499

Open
@pawelblaszczyk5

Description

@pawelblaszczyk5

I'm using React Router as a...

framework

Reproduction

https://github.com/pawelblaszczyk5/matches-circular-repro

  1. Go to app/routes/home.tsx
  2. Observe TS error

image

On the other hand, if I declare component as a function declaration it doesn't cause type error

image

Same if I don't access the matches prop

image

System Info

System:
    OS: macOS 15.1.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 92.77 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.local/state/fnm_multishells/40204_1733695232690/bin/node
    Yarn: 1.22.19 - ~/.local/state/fnm_multishells/40204_1733695232690/bin/yarn
    npm: 10.2.3 - ~/.local/state/fnm_multishells/40204_1733695232690/bin/npm
    pnpm: 8.15.8 - ~/.local/state/fnm_multishells/40204_1733695232690/bin/pnpm
    bun: 1.1.33 - ~/.bun/bin/bun
  Browsers:
    Chrome: 131.0.6778.109
    Edge: 120.0.2210.121
    Safari: 18.1.1
  npmPackages:
    @react-router/dev: ^7.0.2 => 7.0.2 
    @react-router/node: ^7.0.2 => 7.0.2 
    @react-router/serve: ^7.0.2 => 7.0.2 
    react-router: ^7.0.2 => 7.0.2 
    vite: ^5.4.11 => 5.4.11

Used Package Manager

pnpm

Expected Behavior

I can access every component prop without TypeScript error regardless of the way I declare route component

Actual Behavior

Accessing matches from generated type on route component declared as arrow function causes TS error

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions