Skip to content

createRootRoute is not detected if exported via export { Route } instead of export const Route #4487

Open
@AmanBarakat

Description

@AmanBarakat

Which project does this relate to?

Router

Describe the bug

Hi team 👋

Thanks for all the great work on TanStack Router — it's been a pleasure using it.

I wanted to flag a subtle but important issue we ran into when using file-based routing with createRootRoute, and after updating to 1.121.x version.

In our project, we follow a convention of placing all exports at the end of the file, so we had something like this:

const Route = createRootRoute({...});
export { Route };

However, with this format, the root route was skipped. None of the logic or layout inside it was applied at all. After some debugging, we realized that simply changing it to this fixed the issue:

export const Route = createRootRoute({...});

It would be great if both export styles could be supported.

Your Example Website or App

https://stackblitz.com/edit/github-dzbsynpg-x5ue7aau

Steps to Reproduce the Bug or Issue

Run the app.

You will see the index route mount, but the root layout is skipped — no red border, no heading, and no console log from the root.

Now update the export in __root.tsx to:

export const Route = createRootRoute({
  component: () => {
    console.log("Root route rendered");
    return (
      <div style={{ border: "2px solid red", padding: 20 }}>
        <h1>Root Layout</h1>
        <Outlet />
      </div>
    );
  },
});

Expected behavior

The root route should be recognized and rendered whether it's exported as:

export const Route = createRootRoute({...});

or

const Route = createRootRoute({...});
export { Route };

Screenshots or Videos

No response

Platform

  • OS: Any
  • Browser: Any
  • Version: Not browser-related — export handling issue

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions