The order of the keys in the createFileRoute parameters affects the TS type hints. #6100
Description
Which project does this relate to?
Router
Describe the bug
// src/routes/index.tsx
export const Route = createFileRoute('/')({
component: HomeComponent,
// loader(ctx) {
// // Type hints are unavailable
// console.log(ctx.deps.name);
// return 'test';
// },
loaderDeps() {
return {
name: 'bob',
};
},
loader(ctx) {
// Type hints are available
console.log(ctx.deps.name);
return 'test';
},
});
This is the first case. If the loader is written below the loaderDeps, everything works fine. However, if it is written above the loader, Ts will not be able to get the type of ctx.deps.
export const Route = createRootRoute({
component: RootComponent,
// Type hints are available
// loader: (opts) => {
// return {
// name: 'bob',
// };
// },
head: (opts) => {
return {};
},
// The type hint is unavailable, or becomes available after removing the opst parameter from the loader or head.
loader: (opts) => {
return {
name: 'bob',
};
},
});
function RootComponent() {
// An error will occur here.
const { name } = Route.useLoaderData();
}
This is the second scenario. If the loader is placed above the head, Route.useLoaderData() will get the correct type. However, if it's placed below, you must remove opts to get the correct type.
Your Example Website or App
https://stackblitz.com/edit/github-sig6kux6?file=src%2Froutes%2Findex.tsx
Steps to Reproduce the Bug or Issue
Expected behavior
Regardless of the order of the keys, the correct TS type hint can be obtained.
Screenshots or Videos
No response
Platform
- Router / Start Version: [e.g. ^1.140.0]
- OS: [e.g. macOS]
- Browser: [e.g. Chrome,]
- Browser Version: [e.g. 143]
- Bundler: [e.g. vite]
- Bundler Version: [e.g. 7.2.7]
Additional context
No response