Wrong type in LayoutComponent exported from @remix-run/react

[fire332]

Reproduction

root.tsx

import type { LayoutComponent } from '@remix-run/react/dist/routeModules'

export const Layout: LayoutComponent = function Layout({ children }) { return <div /> }
// Property 'children' does not exist on type '{}'.ts(2339)

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz     
    Memory: 5.06 GB / 15.71 GB
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.3 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (121.0.2277.128), ChromiumDev (123.0.2400.1)
    Internet Explorer: 11.0.19041.3636
  npmPackages:
    @remix-run/dev: ^2.7.2 => 2.7.2
    @remix-run/express: ^2.7.2 => 2.7.2
    @remix-run/node: ^2.7.2 => 2.7.2
    @remix-run/react: ^2.7.2 => 2.7.2
    @remix-run/server-runtime: ^2.7.2 => 2.7.2
    vite: ^5.1.4 => 5.1.4

Used Package Manager

pnpm

Expected Behavior

type LayoutComponent = ComponentType<{
  children: ReactElement<
    unknown,
    ErrorBoundaryComponent | HydrateFallbackComponent | RouteComponent
  >;
}>;

to follow the docs on the root layout export.

Actual Behavior

Type is ComponentType, aka ComponentType<{}>; a user-defined component that takes no props.

[brophdawg11]

We can get this updated internally but FWIW route module component types are not exported through the top-level @remix-run/react because they're not currently public API. I think there's some hope eventually TS will be able to type at the module level at which point Remix would be able to provide better type safety on module exports, but until then we haven't made the decision to export those types for RouteComponent, ErrorBoundaryComponent, HydrateFallbackComponent, or LayoutComponent.