T
TanStack•2mo ago
exotic-emerald

Auto code splitting - does component need to be defined in route file?

Hello! I need clarification on the automatic code splitting feature. Current Pattern: 
// Separate file
const CurrencyPage = () => { /* component logic */ }
export default CurrencyPage;

// Route file
import CurrencyPage from "@/features/app/settings/currency";
export const Route = createFileRoute("/_app/settings/currency/")({
  component: CurrencyPage, // Imported from another file
});
// Separate file
const CurrencyPage = () => { /* component logic */ }
export default CurrencyPage;

// Route file
import CurrencyPage from "@/features/app/settings/currency";
export const Route = createFileRoute("/_app/settings/currency/")({
  component: CurrencyPage, // Imported from another file
});
The Docs Say:
"Route properties like component, loader, etc., should not be exported from the route file. Exporting these properties results in them being bundled into the main application bundle, which means that they will not be code-split."
Example from docs: 
// ❌ Do NOT do this!
export function PostsNotFoundComponent() { ... }

// ✅ Correct  
function PostsNotFoundComponent() { ... }
// ❌ Do NOT do this!
export function PostsNotFoundComponent() { ... }

// ✅ Correct  
function PostsNotFoundComponent() { ... }
Question: Does this mean the component MUST be defined in the route file (not imported) for auto code splitting to work? Should I refactor to this instead? 
export const Route = createFileRoute("/_app/settings/currency/")({
  component: CurrencyPage,
});

// Component in same file (not exported)
function CurrencyPage() {
  // all component logic here
}
export const Route = createFileRoute("/_app/settings/currency/")({
  component: CurrencyPage,
});

// Component in same file (not exported)
function CurrencyPage() {
  // all component logic here
}
If yes, is this the recommended approach even for large pages? Or is there a better pattern to maintain separation while keeping auto code splitting? Thanks! 🙏
2 Replies
solid-orange
solid-orange•2mo ago
the docs are not wrong, but the wording can be improved. IF you define a component inside a route file, THEN dont export it. importing it from any other file is fine
exotic-emerald
exotic-emeraldOP•2mo ago
Got it, thanks for clarifying!

Did you find this page helpful?