TanStackT
TanStack8mo ago
11 replies
brilliant-lime

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()],
});


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


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


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


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?
Was this page helpful?