Inferred type of loader/action data from typegen is incorrect when loader/action returns explicitly typed data

[harrygr]

I'm using React Router as a...

framework

Reproduction

https://stackblitz.com/edit/github-5hxqgqbv?file=app%2Froutes%2Fhome.tsx

Example:

import { Route } from "./+types/test";

interface Result {
  errors?: Record<string, string>;
  result: string;
}

const getResult = (n: number): Result => {
  if (n > 0.5) {
    return { result: "ok", errors: { foo: "bar" } };
  }

  return { result: "bad" };
};

export const action = async () => {
  return getResult(1);
};

export const loader = async () => {
  return getResult(0.1);
};

export const Component = ({ actionData, loaderData }: Route.ComponentProps) => {
  actionData?.errors; // unknown, should be Record<string, string> | undefined
  loaderData.errors; // unknown, should be Record<string, string> | undefined

  return <div></div>;
};

System Info

System:
    OS: macOS 15.3.1
    CPU: (12) arm64 Apple M2 Pro
    Memory: 86.84 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v20.11.1/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
    pnpm: 9.15.3 - ~/.nvm/versions/node/v20.11.1/bin/pnpm
  Browsers:
    Chrome: 133.0.6943.55
    Safari: 18.3
  npmPackages:
    @react-router/dev: ^7.1.5 => 7.2.0
    @react-router/fs-routes: ^7.1.5 => 7.2.0
    @react-router/serve: ^7.1.5 => 7.2.0
    react-router: ^7.1.5 => 7.2.0
    vite: ^5.4.11 => 5.4.14

Used Package Manager

npm

Expected Behavior

When an action or loader returns data from a function that declares its return type the action/loader data should have the correct type.

Actual Behavior

In the case of the example, the error property is unknown, despite it being typed as Record<string,string> in the Result type.

Note: This is a regression introduced in react-router 7.2. 7.1 behaves correctly.

[LeoDanielsson]

Yes, I also noticed this. Both Record<string, Foo> and the index signature { [key: string]: Foo } becomes unknown after typegen since react-router@7.2.0.

Here's another example with index signature based on a fresh npx create-react-router@latest.

app/routes/home.tsx

import type { Route } from "./+types/home";

interface Data {
  id: string;
  value: string;
}

export function loader({}: Route.LoaderArgs) {
  const dataMap: { [key: string]: Data } = {
    "1": { id: "1", value: "one" },
    "2": { id: "2", value: "two" },
    "3": { id: "3", value: "three" },
  };

  return { dataMap };
}

export default function Home({ loaderData }: Route.ComponentProps) {
  return <DataRenderer dataMap={loaderData.dataMap} />;
}

interface DataRendererProps {
  dataMap: { [key: string]: Data };
}

function DataRenderer({ dataMap }: DataRendererProps) {
  return (
    <main>
      {Object.values(dataMap).map((data) => (
        <div>{data.id}</div>
      ))}
    </main>
  );
}

Results in the following type error:

➜  my-react-router-app git:(main) ✗ npm run typecheck

> typecheck
> react-router typegen && tsc

app/routes/home.tsx:26:24 - error TS2322: Type 'unknown' is not assignable to type 'Record<string, Data>'.

26   return <DataRenderer dataMap={loaderData.dataMap} />;
                          ~~~~~~~

  app/routes/home.tsx:30:3
    30   dataMap: Record<string, Data>;
         ~~~~~~~
    The expected type comes from property 'dataMap' which is declared here on type 'IntrinsicAttributes & DataRendererProps'


Found 1 error in app/routes/home.tsx:26

On react-router@7.1.0, this typecheck passes.

[bsnelder]

Same here, seems related to this PR: #12264

[kroofy]

I would assume this issue is related #13058

[pcattori]

Duplicate of #13058