T
TanStack•6mo ago
foreign-sapphire

Import issue in routeTree.gen.ts when creating api routes

I have created an API route in src/routes/api/auth/$.ts : 
import { createAPIFileRoute } from "@tanstack/react-start/api";
import { auth } from "@/lib/server/auth";

export const APIRoute = createAPIFileRoute("/api/auth/$")({
  GET: ({ request }) => {
    return auth.handler(request);
  },
  POST: ({ request }) => {
    return auth.handler(request);
  },
});
import { createAPIFileRoute } from "@tanstack/react-start/api";
import { auth } from "@/lib/server/auth";

export const APIRoute = createAPIFileRoute("/api/auth/$")({
  GET: ({ request }) => {
    return auth.handler(request);
  },
  POST: ({ request }) => {
    return auth.handler(request);
  },
});
However, when the routeTree.gen.ts file gets regenerated it tries to import and use a named export called Route from the api route file which does not exist as the named export is called APIRoute. 
import { Route as ApiAuthSplatImport } from './routes/api/auth.$'

...

const ApiAuthSplatRoute = ApiAuthSplatImport.update({
  id: '/api/auth/$',
  path: '/api/auth/$',
  getParentRoute: () => rootRoute,
} as any)

...
import { Route as ApiAuthSplatImport } from './routes/api/auth.$'

...

const ApiAuthSplatRoute = ApiAuthSplatImport.update({
  id: '/api/auth/$',
  path: '/api/auth/$',
  getParentRoute: () => rootRoute,
} as any)

...
This causes an error as the import is incorrect. Am I missing some configuration or is this a known bug?
4 Replies
deep-jade
deep-jade•6mo ago
are you on the latest version of all packages ?
foreign-sapphire
foreign-sapphireOP•6mo ago
Additional context, I have configured the appDirectory to be src in app.config.ts and I have configured the api router in api.ts like so: 
import {
  createStartAPIHandler,
  defaultAPIFileRouteHandler,
} from "@tanstack/react-start/api";

export default createStartAPIHandler(defaultAPIFileRouteHandler);
import {
  createStartAPIHandler,
  defaultAPIFileRouteHandler,
} from "@tanstack/react-start/api";

export default createStartAPIHandler(defaultAPIFileRouteHandler);
yes I updated all the packages to latest version 
"@tanstack/react-query": "^5.69.0",
"@tanstack/react-query-devtools": "^5.69.0",
"@tanstack/react-router": "^1.114.27",
"@tanstack/react-router-devtools": "^1.114.27",
"@tanstack/react-router-with-query": "^1.114.27",
"@tanstack/react-start": "^1.114.27",
"@tanstack/router-plugin": "^1.114.27",
"vinxi": "0.5.3",
"@tanstack/react-query": "^5.69.0",
"@tanstack/react-query-devtools": "^5.69.0",
"@tanstack/react-router": "^1.114.27",
"@tanstack/react-router-devtools": "^1.114.27",
"@tanstack/react-router-with-query": "^1.114.27",
"@tanstack/react-start": "^1.114.27",
"@tanstack/router-plugin": "^1.114.27",
"vinxi": "0.5.3",
deep-jade
deep-jade•6mo ago
do you have a vite.config.ts by chance ? if yes delete that only use app.config.ts (for now as long as we still have vinxi)
foreign-sapphire
foreign-sapphireOP•6mo ago
That fixed the issue with the api route being imported incorrectly in the routeTree file, however it broke my tailwind 4 integration. Is tailwind 4 supported yet? Nvm I found the issue. It was with the import statement in my css file. Thanks for your help Manuel!

Did you find this page helpful?