examples: replace relative paths with path aliases to improve consist…

[Zuckjet]

I used TanStack and Cloudflare to build my web project today, and it amazed me. Also, I noticed there are some minor flaws in the example code that could be improved.

[coderabbitai]

Walkthrough

Five files in the examples/react/start-basic-cloudflare directory have their import paths updated from relative paths to path aliases (e.g., ../utils/posts → ~/utils/posts), affecting module resolution without changing runtime behavior.

Changes

Cohort / File(s)	Summary
Import Path Alias Consolidation examples/react/start-basic-cloudflare/src/routes/posts.$postId.tsx, examples/react/start-basic-cloudflare/src/routes/posts.tsx, examples/react/start-basic-cloudflare/src/routes/posts_.\_$postId.deep.tsx, examples/react/start-basic-cloudflare/src/routes/users.$userId.tsx, examples/react/start-basic-cloudflare/src/routes/users.tsx	Updated import statements to use ~/ path alias instead of relative paths (../utils/*), consolidating module resolution approach across example files.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• All changes follow an identical, repetitive pattern (import path substitution)
• No logic, control flow, or type signatures modified
• No exported/public declarations altered
• Straightforward verification of alias configuration

Possibly related PRs

• Add start-basic-cloudflare example #5254: Introduced the start-basic-cloudflare example and the affected files; this PR aligns their import patterns with path alias configuration.

Suggested labels

documentation

Suggested reviewers

• schiller-manuel

Poem

🐰 Imports once scattered, now neatly aligned,
Path aliases tidy what chaos left behind,
From dots and slashes to tildes so clean,
The cleanest imports we've ever seen! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: replacing relative import paths with path aliases across multiple route files in the Cloudflare example project.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

examples/react/start-basic-cloudflare/src/routes/users.$userId.tsx (1)

4-4: Alias change for User type looks good; optional note on alias style.

Using import type { User } from '~/utils/users' matches the rest of this PR and remains a type-only import, so it shouldn’t affect runtime. There is a mix of src/components/... and ~/... aliases across these example routes; if you want maximum consistency, a small follow-up could standardize on one alias style for components too, but it isn’t required for this change.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 98dc050 and e58634e.

📒 Files selected for processing (5)

• examples/react/start-basic-cloudflare/src/routes/posts.$postId.tsx (1 hunks)
• examples/react/start-basic-cloudflare/src/routes/posts.tsx (1 hunks)
• examples/react/start-basic-cloudflare/src/routes/posts_.$postId.deep.tsx (1 hunks)
• examples/react/start-basic-cloudflare/src/routes/users.$userId.tsx (1 hunks)
• examples/react/start-basic-cloudflare/src/routes/users.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript strict mode with extensive type safety for all code

Files:

• examples/react/start-basic-cloudflare/src/routes/users.tsx
• examples/react/start-basic-cloudflare/src/routes/posts_.$postId.deep.tsx
• examples/react/start-basic-cloudflare/src/routes/posts.$postId.tsx
• examples/react/start-basic-cloudflare/src/routes/users.$userId.tsx
• examples/react/start-basic-cloudflare/src/routes/posts.tsx

**/*.{js,ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Implement ESLint rules for router best practices using the ESLint plugin router

Files:

• examples/react/start-basic-cloudflare/src/routes/users.tsx
• examples/react/start-basic-cloudflare/src/routes/posts_.$postId.deep.tsx
• examples/react/start-basic-cloudflare/src/routes/posts.$postId.tsx
• examples/react/start-basic-cloudflare/src/routes/users.$userId.tsx
• examples/react/start-basic-cloudflare/src/routes/posts.tsx

🧠 Learnings (2)

📓 Common learnings

Learnt from: nlynzaad
Repo: TanStack/router PR: 5732
File: packages/start-client-core/src/client/hydrateStart.ts:6-9
Timestamp: 2025-11-02T16:16:24.898Z
Learning: In packages/start-client-core/src/client/hydrateStart.ts, the `import/no-duplicates` ESLint disable is necessary for imports from `#tanstack-router-entry` and `#tanstack-start-entry` because both aliases resolve to the same placeholder file (`fake-start-entry.js`) in package.json during static analysis, even though they resolve to different files at runtime.

Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-06T15:03:07.223Z
Learning: Applies to docs/**/*.{md,mdx} : Use relative links to `docs/` folder format (e.g., `./guide/data-loading`) for internal documentation references

📚 Learning: 2025-11-02T16:16:24.898Z

Learnt from: nlynzaad
Repo: TanStack/router PR: 5732
File: packages/start-client-core/src/client/hydrateStart.ts:6-9
Timestamp: 2025-11-02T16:16:24.898Z
Learning: In packages/start-client-core/src/client/hydrateStart.ts, the `import/no-duplicates` ESLint disable is necessary for imports from `#tanstack-router-entry` and `#tanstack-start-entry` because both aliases resolve to the same placeholder file (`fake-start-entry.js`) in package.json during static analysis, even though they resolve to different files at runtime.

Applied to files:

• examples/react/start-basic-cloudflare/src/routes/users.tsx
• examples/react/start-basic-cloudflare/src/routes/users.$userId.tsx

🔇 Additional comments (4)

examples/react/start-basic-cloudflare/src/routes/posts.tsx (1)

2-2: Alias-based import for fetchPosts looks good.

Switching to ~/utils/posts improves readability and matches the alias pattern used elsewhere, with no behavior change as long as the ~ alias is configured for TS and the bundler in this example.

Please ensure the ~ path alias is defined in this example’s tsconfig (and Vite/Cloudflare build config) so these imports resolve in both dev and build.

examples/react/start-basic-cloudflare/src/routes/posts_.$postId.deep.tsx (1)

2-2: Consistent alias import for fetchPost.

Using ~/utils/posts here aligns this route with the other posts routes and keeps the loader behavior unchanged.

examples/react/start-basic-cloudflare/src/routes/users.tsx (1)

2-2: Alias import for User type is safe and clearer.

Updating to import type { User } from '~/utils/users' keeps this as a type-only import and aligns with the alias usage in other routes without changing runtime behavior.

examples/react/start-basic-cloudflare/src/routes/posts.$postId.tsx (1)

2-2: Utilities now share the same ~ alias as components.

Importing fetchPost from ~/utils/posts brings this route in line with its existing ~/components/... imports, improving local consistency with no functional change.