graceful-blue

Warning: A notFoundError was encountered on the route with ID "root"

I have an extremely simple Start application. My /app/routes/__root.tsx looks like this:

import {
    Outlet,
    ScrollRestoration,
    createRootRoute,
} from "@tanstack/react-router";
import { Meta, Scripts } from "@tanstack/start";
import type { ReactNode } from "react";

export const Route = createRootRoute({
    component: () => <RootComponent />,
});

function RootComponent() {
    return (
        <RootDocument>
            <Outlet />
        </RootDocument>
    );
}

function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
    return (
        <html lang="no">
            <head>
                <Meta />
            </head>
            <body>
                {children}
                <ScrollRestoration />
                <Scripts />
            </body>
        </html>
    );
}

import {
    Outlet,
    ScrollRestoration,
    createRootRoute,
} from "@tanstack/react-router";
import { Meta, Scripts } from "@tanstack/start";
import type { ReactNode } from "react";

export const Route = createRootRoute({
    component: () => <RootComponent />,
});

function RootComponent() {
    return (
        <RootDocument>
            <Outlet />
        </RootDocument>
    );
}

function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
    return (
        <html lang="no">
            <head>
                <Meta />
            </head>
            <body>
                {children}
                <ScrollRestoration />
                <Scripts />
            </body>
        </html>
    );
}

In the outlet, I am rendering this component from /app/routes/index.tsx

import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/")({
    component: RouteComponent,
});

function RouteComponent() {
    return <p>renders</p>;
}

import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/")({
    component: RouteComponent,
});

function RouteComponent() {
    return <p>renders</p>;
}

For some reason, I am encountering a notFoundError in __root.tsx, and I don't understand why

Warning: A notFoundError was encountered on the route with ID "__root__", but a notFoundComponent option was not configured, nor was a router level defaultNotFoundComponent configured. Consider configuring at least one of these to avoid TanStack Router's overly generic defaultNotFoundComponent (<div>Not Found<div>)

Warning: A notFoundError was encountered on the route with ID "__root__", but a notFoundComponent option was not configured, nor was a router level defaultNotFoundComponent configured. Consider configuring at least one of these to avoid TanStack Router's overly generic defaultNotFoundComponent (<div>Not Found<div>)

For reference, here are my other necessary files:

// /app/client.tsx
/// <reference types="vinxi/types/client" />
import { hydrateRoot } from "react-dom/client";
import { StartClient } from "@tanstack/start";
import { createRouter } from "./router";

const router = createRouter();

hydrateRoot(document, <StartClient router={router} />);

// /app/router.tsx
import { createRouter as createTanStackRouter } from "@tanstack/react-router";
import { routeTree } from "./routeTree.gen";

export function createRouter() {
    const router = createTanStackRouter({
        routeTree,
    });

    return router;
}

declare module "@tanstack/react-router" {
    interface Register {
        router: ReturnType<typeof createRouter>;
    }
}

// /app/ssr.tsx
/// <reference types="vinxi/types/server" />
import {
    createStartHandler,
    defaultStreamHandler,
} from "@tanstack/start/server";
import { getRouterManifest } from "@tanstack/start/router-manifest";

import { createRouter } from "./router";

export default createStartHandler({
    createRouter,
    getRouterManifest,
})(defaultStreamHandler);

// /app/client.tsx
/// <reference types="vinxi/types/client" />
import { hydrateRoot } from "react-dom/client";
import { StartClient } from "@tanstack/start";
import { createRouter } from "./router";

const router = createRouter();

hydrateRoot(document, <StartClient router={router} />);

// /app/router.tsx
import { createRouter as createTanStackRouter } from "@tanstack/react-router";
import { routeTree } from "./routeTree.gen";

export function createRouter() {
    const router = createTanStackRouter({
        routeTree,
    });

    return router;
}

declare module "@tanstack/react-router" {
    interface Register {
        router: ReturnType<typeof createRouter>;
    }
}

// /app/ssr.tsx
/// <reference types="vinxi/types/server" />
import {
    createStartHandler,
    defaultStreamHandler,
} from "@tanstack/start/server";
import { getRouterManifest } from "@tanstack/start/router-manifest";

import { createRouter } from "./router";

export default createStartHandler({
    createRouter,
    getRouterManifest,
})(defaultStreamHandler);

5 Replies

mute-gold•10mo ago

not sure what's causing a 404 in your case (usually i think its from a nonexistent favicon) but you can add a defaultNotFoundComponent when creating your router like here: https://github.com/TanStack/router/blob/main/examples/react/start-basic/app/router.tsx#L11 edit: yeah most browsers will automatically try to GET /favicon.ico even if not defined in head, triggering a 404 if it doesnt exist

graceful-blueOP•10mo ago

I'm gonna try the favicon fix tomorrow, thanks for the suggestion 😎 If it doesn't fix it, I'm gonna create a barebones repro project in stackblitz. I just felt that I wanted to get to the bottom of the notFoundError warning, even if adding a defaultNotFoundComponent does silence the warning

flat-fuchsia•10mo ago

sounds like this https://github.com/TanStack/router/issues/2459

GitHub

notFoundError warning triggers when rendering root route · Issue #2...

Which project does this relate to? Start Describe the bug Warning about notFoundError is shown when rendering root route and there's no defaultNotFoundComponent set, even though it renders succ...

flat-fuchsia•10mo ago

can you please comment on that when you find out anything?

mute-gold•10mo ago

yup. cloned his repro, added a favicon.ico to public/, and error no longer shows

Gaming

Programming

Warning: A notFoundError was encountered on the route with ID "__root__"

Did you find this page helpful?

Warning: A notFoundError was encountered on the route with ID "root"