national-gold

Route file does not export any route piece

Sandbox: https://stackblitz.com/edit/vitejs-vite-hc6bcytw I created a new React project using Tanstack Router. This is the Vite configuration

import { tanstackRouter } from '@tanstack/router-plugin/vite';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [tanstackRouter(), react()],
});

import { tanstackRouter } from '@tanstack/router-plugin/vite';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [tanstackRouter(), react()],
});

Next I created a router.ts

import { createRouter } from '@tanstack/react-router';
import { routeTree } from './routeTree.gen';

const router = createRouter({
  routeTree,
  basepath: import.meta.env.VITE_ROUTER_BASE_PATH || '/',
});

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

export { router };

import { createRouter } from '@tanstack/react-router';
import { routeTree } from './routeTree.gen';

const router = createRouter({
  routeTree,
  basepath: import.meta.env.VITE_ROUTER_BASE_PATH || '/',
});

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

export { router };

and imported it in the main file

import { RouterProvider } from '@tanstack/react-router';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { router } from './router';

const rootElement = document.getElementById('root');

if (rootElement) {
  createRoot(rootElement).render(
    <StrictMode>
      <RouterProvider router={router} />
    </StrictMode>
  );
}

import { RouterProvider } from '@tanstack/react-router';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { router } from './router';

const rootElement = document.getElementById('root');

if (rootElement) {
  createRoot(rootElement).render(
    <StrictMode>
      <RouterProvider router={router} />
    </StrictMode>
  );
}

Inside the routes folder I added a root layout and a index.tsx file

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

const Route = createFileRoute('/')({
  component: Page,
});

function Page() {
  return <div>React Starter</div>;
}

export { Route };

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

const Route = createFileRoute('/')({
  component: Page,
});

function Page() {
  return <div>React Starter</div>;
}

export { Route };

When running the app I see the following "error"

Route file "import { createFileRoute } from '@tanstack/react-router'; const Route = createFileRoute('/')({ component: Page, }); function Page() { return <div>React Starter</div>; } export { Route }; " does not export any route piece. This is likely a mistake. Generated route tree in 450ms

Now the index.tsx file also shows the error

Argument of type '"/"' is not assignable to parameter of type 'undefined'.(2345)

and the routeTree.gen.ts file remains empty. What is wrong or missing?

8 Replies

vicious-gold•3mo ago

you need to use export const Route that's what the generator is looking for

national-goldOP•3mo ago

@Manuel Schiller thanks for your reply, that fixed it! 🙂 But my approach used to work before 😦 Has there been a breaking change?

vicious-gold•3mo ago

it wasnt enforced before but we relied on that we could make it work for the other syntax but I am not sure it is worth the effort

national-goldOP•3mo ago

In my other project I separated the page from the route. So the page component was

function Page() {
    return ...
}

export { Page };

function Page() {
    return ...
}

export { Page };

And the routes file only got

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

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

export { Route };

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

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

export { Route };

@Manuel Schiller hm yeah, somehow this doesn't work anymore https://stackblitz.com/edit/vitejs-vite-hcqkqnce But we still use it in production 🤔

vicious-gold•3mo ago

can you please create a GitHub issue for this? then we can see what we can do here

national-goldOP•3mo ago

sure, no problem 🙂 But do you think this is a bug right now.. ? Can't share the production app code, it's private :/

vicious-gold•3mo ago

no need to share that

vicious-gold•3mo ago

fixed that in https://github.com/TanStack/router/releases/tag/v1.121.6

GitHub

Release v1.121.6 · TanStack/router

Version 1.121.6 - 6/12/25, 8:43 PM Changes Fix router-generator: allow standalone export (#4405) (35a5103) by Manuel Schiller Chore examples: fix duration calculation logic (#4353) (bab29d0) by ...

Gaming

Programming

Route file does not export any route piece

Did you find this page helpful?