Summary
After satisfying rule react-doctor/only-export-components and spliting exports for const and component running React Doctor triggers the react-doctor/tanstack-start-missing-head-content error.
It seems like a false positive because the root component contains the <HeadContent /> which itself is included in the root route as the shell component. I might be wrong but the split seems legit and doesn't break anything. Correct me if I'm wrong, thanks.
Diagnostics error
⚠ react-doctor/tanstack-start-missing-head-content
Root route (__root) without <HeadContent /> — route head() meta tags won't render
→ Add `<HeadContent />` inside `<head>` in your __root route — without it, route `head()` meta tags are silently dropped
src/routes/__root.tsx:1
Source code
src/components/root-document.tsx:
import { TanStackDevtools } from "@tanstack/react-devtools";
import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
import { HeadContent, Scripts } from "@tanstack/react-router";
import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
import { ThemeProvider } from "@/components/providers/theme";
export function RootDocument({ children }: { children: React.ReactNode }) {
return (
<html lang="en" suppressHydrationWarning>
<head>
<HeadContent />
</head>
<body>
<ThemeProvider defaultTheme="system" storageKey="theme">
<div className="root">{children}</div>
</ThemeProvider>
<TanStackDevtools
config={{ position: "bottom-right" }}
plugins={[
{
name: "Tanstack Router",
render: <TanStackRouterDevtoolsPanel />,
},
{ name: "Tanstack Query", render: <ReactQueryDevtoolsPanel /> },
]}
/>
<Scripts />
</body>
</html>
);
}src/routes/__root.tsx:
import interLatinWoff2 from "@fontsource-variable/inter/files/inter-latin-wght-normal.woff2?url";
import type { QueryClient } from "@tanstack/react-query";
import { createRootRouteWithContext } from "@tanstack/react-router";
import { NotFound } from "@/components/not-found";
import { RootDocument } from "@/components/root-document";
import appCss from "@/styles.css?url";
export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()(
{
head: () => ({
meta: [
{
charSet: "utf-8",
},
{
name: "viewport",
content: "width=device-width, initial-scale=1",
},
{
title: "Redacted",
},
{
name: "description",
content: "Redacted.",
},
],
links: [
{
rel: "stylesheet",
href: appCss,
},
{
rel: "icon",
href: "/favicon.svg",
type: "image/svg+xml",
},
{
rel: "preload",
as: "font",
type: "font/woff2",
href: interLatinWoff2,
crossOrigin: "anonymous",
},
],
}),
notFoundComponent: NotFound,
shellComponent: RootDocument,
},
);
Summary
After satisfying rule
react-doctor/only-export-componentsand spliting exports for const and component running React Doctor triggers thereact-doctor/tanstack-start-missing-head-contenterror.It seems like a false positive because the root component contains the
<HeadContent />which itself is included in the root route as the shell component. I might be wrong but the split seems legit and doesn't break anything. Correct me if I'm wrong, thanks.Diagnostics error
Source code
src/components/root-document.tsx:src/routes/__root.tsx: