"react-router" + "@vercel-remix" type incompatibility (project broke after upgrading Remix to RR7)

[torbensky]

Description

I followed the Remix -> React Router v7 migration guide and ran into a problem with the EntryContext type exported by @vercel/remix which I configured while following Using a custom app/entry.server file.

I believe it's because this project does not yet support RR7?

Additional context:

Types of property 'routeModules' are incompatible.
...
Types of property 'clientAction' are incompatible
...
The types returned by 'serverAction()' are incompatible between these types.

I have the following entry.server.tsx file:

import { ServerRouter } from "react-router";
import { handleRequest, type EntryContext } from "@vercel/remix";

// Following https://vercel.com/docs/frameworks/remix#using-a-custom-app/entry.server-file
export default async function (
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  reactRouterContext: EntryContext,
) {
  const remixServer = <ServerRouter context={reactRouterContext} url={request.url} />;
  return handleRequest(
    request,
    responseStatusCode,
    responseHeaders,
    remixServer,
  );
}

Dependencies:

  "@react-router/node": "^7.0.0",
  "@react-router/serve": "^7.0.0",
  "@vercel/remix": "^2.15.1",
  "react-router": "^7.0.0",
  "@react-router/dev": "^7.0.0",
  "@react-router/fs-routes": "^7.0.0",

[AlexGodard]

Import EntryContext from react-router instead

import type { EntryContext } from "react-router";

[torbensky]

Hi @AlexGodard thanks for your reply :)

Just wondering, can you explain how you know this will be compatible? The Vercel guide tells us to replace all @remix-run/node dependencies with the @vercel/remix dependency and it replaced the Remix EntryContext with the Vercel one.

My worry about doing what you suggested is that I'd be lying to the type system about what the actual Vercel entry context is?

So I'm wondering if you know that this will not only make the type error go away but also leave me with a correct Vercel/RemixRR7 integration?

[torbensky]

Basically I'm applying Chesterton's Fence here and thinking there was an important reason for Vercel to use their own context type.

[AlexGodard]

@torbensky At this point in time, you can't expect the @vercel/remix package to work with anything React-Router-v7 related. It may work with your current setup, but expect quirks.

The only official working example I've seen of RR7 + Vercel is this repo: https://github.com/remix-run/react-router-templates/tree/main/vercel

Basically, we'll have to wait until the vercel team publishes a new @vercel/react-router package. Latest update on their side I've seen is this: https://old.reddit.com/r/react/comments/1h74ib0/react_router_v7_as_a_framework_app_doesnt_route/m0jc4t8/

There's an issue tracking this: #141

[torbensky]

@torbensky At this point in time, you can't expect the @vercel/remix package to work with anything React-Router-v7 related. It may work with your current setup, but expect quirks.

Thanks for your reply, that is what I was thinking and what this issue was for 👍

[paul-vd]

I believe this topic could be closed, see:

• React-Router v7 compatibility? #141 (comment)
• https://vercel.community/t/support-for-react-router-7/2769/1