Vercel integration doesn't work with nested routes

[termosa]

Vercel cannot deploy the output of RR v7 build when used with nested routes.

I'm using React Router as a framework.

Reproduction

// app/routes.ts
import { type RouteConfig, index, route } from "@react-router/dev/routes";

export default [
  route("/", "routes/Application.tsx", [
    index("routes/Home.tsx"),
  ] satisfies RouteConfig),
];

System Info

https://vercel.com/changelog/support-for-react-router-v7

Used Package Manager

npm

Expected Behavior

App will be built and deployed

Actual Behavior

App is built but Vercel couldn't deploy it.
It fails when collecting resources from /vercel/output with "unexpected error".

Build Completed in /vercel/output [27s]
Deploying outputs...
An unexpected error happened when running this build. We have been notified of the problem. If you have any questions, please contact Vercel Support https://vercel.com/help

I have asked Vercel to expose more details on the problem recently.
I will add them here if I have any, but wouldn't expect that.

[timdorr]

Can you share a more complete reproduction of this issue?

Are you using their @vercel/react-router package? If so, it's likely that you'll need to consult Vercel's support resources.

[termosa]

@timdorr I will wait for the response from Vercel and if they say it's on the framework side I will come back with the code for you and instruction how to reproduce the problem 👌
... or close ticket otherwise

[termosa]

Hi @timdorr !

I have found how to fix it but there are more details to it...

step-by-step:

1. ℹ️ The use of route("/", ...) is what breaking the Vercel deployment:
   Here is the repo generated by Vercel and the commit that breaks the build: termosa/vercel-n-react-router-v7@c029f92

2. 🚨 The route("/", ...) does work as expected in react-router dev runtime, so I did expect it to work on Vercel as well

3. 🔎 The route("", ...) also works as expected and doesn't break the Vercel build

4. ⚠️ The React Router v7 documentation (https://reactrouter.com/start/framework/routing#nested-routes) doesn't suggest to use any of those 2 options

5. ✅ From the documentation, the right thing to do is to use layout() instead of "empty-path" route()

6. ❓Should we do something with "empty-path" route()? I feel like either Vercel should support what RR does (works with empty value) or RR should deny this "hack".

I have sent the same message to Vercel team so they can also evaluate it 👌

[termosa]

Meanwhile, I found another problem with the layout()
If it is set at the root without the index() or empty-path route() it doesn't show 404 page

export default [
  layout("routes/Layout.tsx", [
    route("chat", "routes/Chat.tsx"),
  ] satisfies RouteConfig),
];

[timdorr]

You should be using layout and index for your index route if you want it wrapped in your dashboard.tsx component. Don't use route for index routes or layouts. Use the provided helpers.

Regardless, given that the difference is when deployed to Vercel and that uses their plugin, the assumption is they are causing the issue and we can't fix it from here.

[s0urfruit]

@termosa did this ever work out for you?

[termosa]

@termosa did this ever work out for you?

No. React Router made it work, but Vercel team has not found it in docs so they have answered they won't do it.