Internal Server Error when the first page hit is an API Route is called in a loader

[depsimon]

Which project does this relate to?

Start

Describe the bug

While I was working on the i18n example with start, I noticed a weird behavior as all the users would return an Internal Server Error when restarting the dev server.

I first thought it was coming from my code, but I could reproduce it with the start-basic example as well and it seems related to the API routes that are called in the loader.

Your Example Website or App

https://github.com/TanStack/router/tree/main/examples/react/start-basic

Steps to Reproduce the Bug or Issue

1. Install the dependencies pnpm i at the root of the repo
2. Go into the examples/react/start-basic example
3. Launch the dev server pnpm dev
4. Navigate to the users page, and select the non-existing user
5. Kill the dev server in your terminal
6. Relaunch the dev server pnpm dev
7. Refresh the app on the same URL as before (http://localhost:3000/users/i-do-not-exist)
8. Navigate to the other users, notice thet all fail to fetch (API throwns an Internal server error)
9. The rest of the app is still usable, just not the users pages.

You might have to kill & relaunch the dev server multiple times to notice it, it's not happening 100% the case but still pretty common.

An error is thrown in the terminal as well depending on which error is thrown (either the fetch all users or the fetch one user):

# Error on /api/users/$id
Error importing route file: TypeError: (0 , __vite_ssr_import_1__.createAPIFileRoute) is not a function
    at eval (/Users/simon/Code/Github/tanstack-router/examples/react/start-basic/src/routes/api/users.$id.ts?pick=APIRoute:6:62)

# Error on /api/users
Error importing route file: TypeError: (0 , __vite_ssr_import_1__.createAPIFileRoute) is not a function
    at eval (/Users/simon/Code/Github/tanstack-router/examples/react/start-basic/src/routes/api/users.ts?pick=APIRoute:6:62)
    at async ESModulesEvaluator.runInlinedModule (file:///Users/simon/Code/Github/tanstack-router/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/vite/dist/node/module-runner.js:1049:5)
    at async SSRCompatModuleRunner.directRequest (file:///Users/simon/Code/Github/tanstack-router/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/vite/dist/node/module-runner.js:1271:61)
    at async SSRCompatModuleRunner.directRequest (file:///Users/simon/Code/Github/tanstack-router/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-CE7taEzf.js:31756:23)
    at async SSRCompatModuleRunner.cachedRequest (file:///Users/simon/Code/Github/tanstack-router/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/vite/dist/node/module-runner.js:1167:76)
    at async defaultAPIFileRouteHandler (/Users/simon/Code/Github/tanstack-router/packages/start-api-routes/dist/esm/index.js:134:14)
    at async eval (/Users/simon/Code/Github/tanstack-router/packages/start-api-routes/dist/esm/index.js:17:17)
    at async _callHandler (file:///Users/simon/Code/Github/tanstack-router/node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:1837:16)
    at async file:///Users/simon/Code/Github/tanstack-router/node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:1978:19
    at async Object.callAsync (file:///Users/simon/Code/Github/tanstack-router/node_modules/.pnpm/[email protected]/node_modules/unctx/dist/index.mjs:72:16)
    at async Server.toNodeHandle (file:///Users/simon/Code/Github/tanstack-router/node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:2270:7)

Expected behavior

The app should also work when the first page loaded uses an API route in it's loader, even if the API throws an error.

Screenshots or Videos

tanstart-basic-api-error.mp4

Platform

• OS: macOS
• Browser: Arc
• Version: Version 1.87.0 (60241)

Additional context

I think this only happens when the first page you hit on your server is a route that uses an API route.

Most of the times, I have the users.route.tsx layout but the users.$userId.tsx route is throwing the Error Boundary.
Sometimes, I only have the root layout. But I haven't figured out what differs, I suppose sometimes the users API might be loaded after the users.$id one.

I think this is only an issue when working locally, but haven't deployed to check.

[SeanCassiere]

Could you confirm this is only in the development server? Or does this follow through in production (which it shouldn't)?

[depsimon]

Could you confirm this is only in the development server? Or does this follow through in production (which it shouldn't)?

I don't have any app with API routes in production yet so I can't confirm at the moment.

[SeanCassiere]

I performed testing for this locally using examples/react/start-basic using the'node-server' preset to test the production functionality.

Following the reproduction steps, I could successfully recreate the described bug in the development environment. However, it couldn't be reproduced when it was tested against the built production output.

[SeanCassiere]

@depsimon at this moment we are currenly in the process of moving TanStack Start away from the vinxi dependency. We'll only be able to look at this issue once that has been merged in, since the current implementation of API routes is very vinxi-specific.

We'll be posting updates about what's happening with TanStack Start here - #2863

You can also follow Tanner on twitter since he'll be likely to have a post up when the devinxi branch is merged in.

[depsimon]

No worries @SeanCassiere, thanks for checking this out!