cloudflare build fails if routes/index.tsx is replaced by vinxi dev server automatically

[jonotron]

Which project does this relate to?

Start

Describe the bug

If npm run dev is running and the vinxi is boot strapping route files for you and you delete the index.tsx file and then generate a new one (or rename another route to index.tsx), npm run build will fail with the following error:

[tsr-routes-manifest] Could not load tsr:routes-manifest (imported by node_modules/@tanstack/start/dist/esm/router-manifest/index.js): Cannot read properties of undefined (reading 'map')

This does not seem to happen if vinxi dev server is not running and you rename files and adjust the router path manually.

It's not clear how to recover from this error (at least everything I've tried). Deleting the .vinxi/, dist/, and node_modules (and reinstalling) does not seem to reset things to a workable state.

Your Example Website or App

https://stackblitz.com/~/github.com/jonotron/start-basic-example

Steps to Reproduce the Bug or Issue

1. clone the start-counter (or start-basic) example from the tanstack/router repository
2. npm install
3. npm install unenv
4. Add cloudflare settings to app.config.js from https://tanstack.com/router/latest/docs/framework/react/start/hosting#cloudflare-pages
5. run npm run build to verify that a cloudflare build will succeed
6. run npm run dev to get vinxi dev server running
7. delete the app/routes/index.tsx file
8. create a new app/routes/index.tsx file (vinxi will fill in with basic scaffolding code)
9. quit the vinxi dev server
10. run npm run build

Expected behavior

As a developer, I expect the build to continue to work when vinxi creates a new index.tsx route for me.

Screenshots or Videos

No response

Platform

• OS: macOS, Linux (stackblitz)

Additional context

I'm not totally sure what exactly is scaffolding the new routes for me (it caught me off guard when I noticed it) but I'm fairly sure it's vinxi dev server. And I'm not even entirely sure if this is the cause of the bug but I can reliably reproduce the issue on my mac and on stackblitz. I can't figure out how to revert the issue for the life of me.

This doesn't seem to affect non cloudflare target build but I haven't spent much time exploring anything else yet.

Hope this is helpful as I'm quite enjoying exploring start but this has been eating at me for some days now.

[SeanCassiere]

I'm not sure if this is something that's really in our control here.

@tannerlinsley @nksaraf is there a reasonable expectation for running both the build script whilst the dev one is running here?

Also, @nksaraf is this something you've seen with SolidStart?

[jonotron]

This error appears even after stopping the dev server before running the build. And it seems to get into a state that I can not recover from at all. I can try to record a little video later today if that helps.

[jonotron]

Here's a short video showing what I did to get into this state: https://share.cleanshot.com/ssy8Wfxk

[jonotron]

Sorry all. I think I've figured this out. The scaffolded route file does not return JSX, it just returns a string.

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

export const Route = createFileRoute('/')({
  component: RouteComponent,
})

function RouteComponent() {
  return 'Hello /!' // this needs to be JSX
}

If I bother to edit the scaffolded file to return JSX instead of a string the build succeeds.

[SeanCassiere]

Sorry all. I think I've figured this out. The scaffolded route file does not return JSX, it just returns a string.

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

export const Route = createFileRoute('/')({
  component: RouteComponent,
})

function RouteComponent() {
  return 'Hello /!' // this needs to be JSX
}

If I bother to edit the scaffolded file to return JSX instead of a string the build succeeds.

Definitely one of the weirder bugs I've seen 🙄

Would you be comfortable making a PR fixing this in the router-generator? It'd just be changing it from returning a string to a <div> wrapping the route path.