Component import is undefined for parent routes - tanstack-react-router

[denyncrawford]

Describe the Bug

When creating a sub route using a folder (not dot convention) the index page is added as a children of the parent segment, this parent segment, which can be at any level, is assigned to load a module which is undefined, as you can see in the following snippet:

// Generouted, changes to this file will be overridden
import { Fragment } from "react";
import {
  Outlet,
  RouterProvider,
  createLazyRoute,
  createRootRoute,
  createRoute,
  createRouter,
} from "@tanstack/react-router";

import App from "./pages/_app";
import NoMatch from "./pages/404";

const root = createRootRoute({ component: App || Outlet });
const _404 = createRoute({
  getParentRoute: () => root,
  path: "*",
  component: NoMatch || Fragment,
});
const projects = createRoute({
  getParentRoute: () => root,
  path: "projects",
}).lazy(() => undefined.then((m) => createLazyRoute("undefined")({})));
const projectsindex = createRoute({
  getParentRoute: () => projects,
  path: "/",
}).lazy(() =>
  import("./pages/projects/index").then((m) =>
    createLazyRoute("/projects")({ component: m.default }),
  ),
);
const dashboard = createRoute({
  getParentRoute: () => root,
  path: "dashboard",
}).lazy(() => undefined.then((m) => createLazyRoute("undefined")({})));
const dashboardindex = createRoute({
  getParentRoute: () => dashboard,
  path: "/",
}).lazy(() =>
  import("./pages/dashboard/index").then((m) =>
    createLazyRoute("/dashboard")({ component: m.default }),
  ),
);
const dashboardaccounts = createRoute({
  getParentRoute: () => dashboard,
  path: "accounts",
}).lazy(() => undefined.then((m) => createLazyRoute("undefined")({})));
const dashboardaccountsindex = createRoute({
  getParentRoute: () => dashboardaccounts,
  path: "/",
}).lazy(() =>
  import("./pages/dashboard/accounts/index").then((m) =>
    createLazyRoute("/dashboard/accounts")({ component: m.default }),
  ),
);
const dashboardaccountsfilesnew = createRoute({
  getParentRoute: () => dashboardaccounts,
  path: "files/new",
}).lazy(() =>
  import("./pages/dashboard/accounts/files.new").then((m) =>
    createLazyRoute("/dashboard/accounts/files/new")({ component: m.default }),
  ),
);
const dashboardaccount = createRoute({
  getParentRoute: () => dashboard,
  path: "account",
}).lazy(() =>
  import("./pages/dashboard/account").then((m) =>
    createLazyRoute("/dashboard/account")({ component: m.default }),
  ),
);
const index = createRoute({ getParentRoute: () => root, path: "/" }).lazy(() =>
  import("./pages/index").then((m) =>
    createLazyRoute("/")({ component: m.default }),
  ),
);

const config = root.addChildren([
  projects.addChildren([projectsindex]),
  dashboard.addChildren([
    dashboardindex,
    dashboardaccounts.addChildren([
      dashboardaccountsindex,
      dashboardaccountsfilesnew,
    ]),
    dashboardaccount,
  ]),
  index,
  _404,
]);

const router = createRouter({ routeTree: config });
export const routes = config;
export const Routes = () => <RouterProvider router={router} />;

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

This is my router structure:

Generouted Version

1.19.10

Your Example Website or App or Reproduction

https://stackblitz.com/edit/vitejs-vite-czkznhxy?file=src%2FApp.tsx

Steps to Reproduce the Bug or Issue

1. Add a folder in the pages directory
2. add an index.tsx with content
3. Navigate to that route

Expected Behavior

I expect to successfully navigate to the route but i'm seeing a navigation error indicating

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Arc
• Browser version: 1.80.0

Additional context

No response

[denyncrawford]

I added a fix for this problem which is tested locally and works as expected but idk if this is the way to solve it since probably the modules shouldn't be undefined.

[oedotme]

@denyncrawford Thanks for the reporting and fixing this issue!

After reviewing the code, it's possible yes to have undefined modules for intermediary segments with no layout.

The fix is now released and available on v1.19.11

Thanks!