TypeScript: Route.useLoaderData() breaks / has incorrect typing

[walidsj]

Which project does this relate to?

Router

Describe the bug

I'm experiencing a TypeScript issue when using Route.useLoaderData() in latest version of TanStack Router.
The route works correctly at runtime, but TypeScript breaks / loses type inference when accessing loader data.

Your Example Website or App

Steps to Reproduce the Bug or Issue

export const Route = createFileRoute("/users")({ 
  loader: () => {
    return {
      users: [{ id: 1, name: "John" }],
    };
  },
  component: UsersPage,
});

function UsersPage() {
  const data = Route.useLoaderData();

  // ❌ TypeScript error or missing type inference here
  data.users.map(user => user.name);

  return null;
}

Expected behavior

Route.useLoaderData() should return properly inferred types from the route loader, similar to how useLoaderData works in other router implementations.

Screenshots or Videos

No response

Platform

• Router / Start Version: 1.157.11
• OS: Linux
• Browser: Firefox
• Browser Version: 147.0.1
• Bundler: Vite
• Bundler Version: 7.3.1

Additional context

No response

[schiller-manuel]

please provide a complete minimal reproducer project

[brenelz]

You might just have to run the dev server? Not 100% sure without a reproducer project

[ManiacMaxo]

I might have hit the same issue. Given this example page, the loader type is invalid:

import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/")({
	head: async ({ loaderData }) => { // loaderData: undefined
		return {
			meta: [{ title: loaderData }],
		};
	},
	loader: async (ctx) => { // Type Promise<string> is not assignable to type `never`
		return `hello ${ctx.location.pathname}`;
	},
	component: App,
});

function App() {
	const data = Route.useLoaderData(); // data: undefined

	return <div>{data}</div>;
}

However, if I move the loader above the head definition - everything works.

import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/")({
	loader: async (ctx) => {
		return `hello ${ctx.location.pathname}`;
	},
	head: async ({ loaderData }) => { // loaderData: string
		return {
			meta: [{ title: loaderData }],
		};
	},
	component: App,
});

function App() {
	const data = Route.useLoaderData(); // data: string

	return <div>{data}</div>;
}

[BrendanC23]

There's an ESLint plugin that validates the route property order.

[schiller-manuel]

closing as no reproducer was provided