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

6 messages · Page 1 of 1 (latest)

unreal rain
#

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>
    );
}

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>;
}

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>)

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);
#

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

fair ember
unreal rain
#

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

nocturne lynx
#

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