Skip to content

createRoutesStub still fails type checking #13579

Open
@ziimakc

Description

@ziimakc

I'm using React Router as a...

library

Reproduction

export default function RouteComponent(args: Route.ComponentProps) {
	if (args.loaderData.error) {
		throw args.loaderData.error;
	}

	return <div data-testid="ping">{args.loaderData.data}</div>;
}

	const Stub = createRoutesStub([
			{
				path: "/ping",
				Component: RouteComponent,
				loader,
			},
		]);

Error:

Type '(args: ComponentProps) => Element' is not assignable to type 'ComponentType<{ params: Readonly<Partial<string | Record<string, string | undefined>>>; loaderData: unknown; actionData: unknown; matches: UIMatch<unknown, unknown>[]; }>'.
  Type '(args: ComponentProps) => Element' is not assignable to type 'FunctionComponent<{ params: Readonly<Partial<string | Record<string, string | undefined>>>; loaderData: unknown; actionData: unknown; matches: UIMatch<unknown, unknown>[]; }>'.
    Types of parameters 'args' and 'props' are incompatible.
      Type '{ params: Readonly<Partial<string | Record<string, string | undefined>>>; loaderData: unknown; actionData: unknown; matches: UIMatch<unknown, unknown>[]; }' is not assignable to type 'ComponentProps'.
        Types of property 'params' are incompatible.
          Type 'Readonly<Partial<string | Record<string, string | undefined>>>' is not assignable to type '{ [key: string]: string | undefined; }'.
            Type 'string' is not assignable to type '{ [key: string]: string | undefined; }'.ts(2322)
index.d.mts(445, 5): The expected type comes from property 'Component' which is declared here on type 'StubRouteObject'

Generated route args type:

type Route.ComponentProps = {
    params: {
        [key: string]: string | undefined;
    };
    loaderData: DataOrError<string>;
    actionData?: undefined;
    matches: [{
        id: "root";
       // doesn't match stub
        params: {} & {
            [key: string]: string | undefined;
        };
        pathname: string;
        data: LoaderData;
        handle: unknown;
    }, {
        ...;
    }, {
        ...;
    }, ...({
        ...;
    } | undefined)[]];
}

System Info

System:
    OS: Linux 6.11 Ubuntu 24.04.2 LTS 24.04.2 LTS (Noble Numbat)
    CPU: (16) x64 AMD Ryzen 7 8845HS w/ Radeon 780M Graphics
    Memory: 6.31 GB / 14.87 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 22.15.0 - /usr/bin/node
    npm: 10.9.2 - /usr/bin/npm
    pnpm: 10.10.0 - ~/snap/code/184/.local/share/pnpm/pnpm
  Browsers:
    Chrome: 136.0.7103.59

Used Package Manager

npm

Expected Behavior

No typescript type error

Actual Behavior

Typescript error

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions