this repo has no description
new cursor rule
+54
+54
.cursor/rules/tanstack-router-createfileroute.mdc
+54
.cursor/rules/tanstack-router-createfileroute.mdc
···
1
+
---
2
+
description:
3
+
globs: src/routes/**/*.tsx
4
+
alwaysApply: false
5
+
---
6
+
# TanStack Router: Do NOT Import createFileRoute
7
+
8
+
When working with TanStack Router route files in the [src/routes](mdc:src/routes) directory, **NEVER** import the `createFileRoute` function.
9
+
10
+
## Why This Rule Exists
11
+
12
+
The `createFileRoute` function is automatically made available in each route file through TypeScript module declarations in [src/routeTree.gen.ts](mdc:src/routeTree.gen.ts). This file contains module augmentation that declares `createFileRoute` for each specific route:
13
+
14
+
```typescript
15
+
declare module './routes/index' {
16
+
const createFileRoute: CreateFileRoute<...>
17
+
}
18
+
declare module './routes/basic' {
19
+
const createFileRoute: CreateFileRoute<...>
20
+
}
21
+
// ... and so on for each route
22
+
```
23
+
24
+
## Correct Usage
25
+
26
+
✅ **DO THIS** - Use `createFileRoute` directly without importing:
27
+
```tsx
28
+
// src/routes/example.tsx
29
+
export const Route = createFileRoute({
30
+
component: RouteComponent,
31
+
});
32
+
33
+
function RouteComponent() {
34
+
// component logic
35
+
}
36
+
```
37
+
38
+
❌ **DON'T DO THIS** - Never import createFileRoute:
39
+
```tsx
40
+
// src/routes/example.tsx
41
+
import { createFileRoute } from '@tanstack/react-router' // ❌ WRONG!
42
+
43
+
export const Route = createFileRoute({
44
+
component: RouteComponent,
45
+
});
46
+
```
47
+
48
+
## Key Points
49
+
50
+
- `createFileRoute` is globally available in route files through module declarations
51
+
- Each route file gets its own typed version of `createFileRoute` with proper type safety
52
+
- Importing it manually will cause TypeScript conflicts and is unnecessary
53
+
- This pattern is automatically maintained by TanStack Router's code generation
54
+