vercel / remix

Build Better Websites. Create modern, resilient user experiences with web fundamentals.

Welcome to Remix!

We are happy you're here!

Remix is a full stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience that deploys to any Node.js server and even non-Node.js environments at the edge like Cloudflare Workers.

Want to know more? Read the Technical Explanation of Remix

This repository contains the Remix source code. This repo is a work in progress, so we appreciate your patience as we figure things out.

Documentation

For documentation about Remix, please visit our website.

Also, please join our community on Discord.

The documentation is automatically generated on each release from the files in the docs directory.

Contributing

If you're interested in contributing code and/or documentation, please see our guide to contributing.

Code of Conduct

Please see our code of conduct for any questions about the kind of community we are trying to build here and what to do if you need help with someone who is not acting professionally.

remix's Issues

Merge Conflict ❌

Latest commit: remix-run@2973677

How to resolve

Pull from the upstream repo:

git pull https://github.com/remix-run/remix.git main

There will be a merge conflict, which needs to be resolved manually.

Frequently, these conflicts are regarding GitHub workflow files,
which were deleted in the vercel/remix repo. In this case,
those workflow files can be git rm'd again to resolve.

If there is a conflict within the source code (i.e. in the Remix
compiler) then the conflicts will need to be manually resolved.

Finally, before committing the resolved merge, ensure that the version
field in the "vercel-remix" package's package.json file matches that
of the "remix-dev" package. If the version needs to be updated, update
the Remix-related dependencies in the package.json file as well,
since Remix keeps them in sync.

Merge Conflict ❌

Latest commit: remix-run@9a9c955

Add Image component for remix

Since Vercel supports image optimization out of the box, it would be really great to see a progressively enhanced image component for remix that uses Vercel's image optimization, and falls back to the default source URL in development

here's a rough proof of concept:

app/components/image.tsx

export function Image({
  src,
  width,
  loading = "lazy",
  ...props
}: Omit<React.ComponentPropsWithoutRef<"img">, "src" | "width"> &
  Required<Pick<React.ComponentPropsWithoutRef<"img">, "src" | "width">>) {
  return (
    // eslint-disable-next-line jsx-a11y/alt-text
    <img
      {...props}
      src={imageSrc(src, width)}
      loading={loading}
      width={width}
    />
  );
}

export function imageSrc(src: string, width: number | string, q = 75) {
  return `/resources/image?url=${encodeURIComponent(src)}&w=${width}&q=${q}`;
}

export function imageSrcSet(src: string, width: number, q = 75) {
  return `${imageSrc(src, width, q)}, ${imageSrc(
    src,
    width * 1.5,
    q
  )} 1.5x, ${imageSrc(src, width * 2, q)} 2x`;
}

app/routes/resources.image.tsx

import type { DataFunctionArgs } from "@remix-run/node";

function getAbsoluteURL(request: Request, url: string) {
  if (url.startsWith("http:") || url.startsWith("https:")) {
    return new URL(url).toString();
  }
  let host =
    request.headers.get("X-Forwarded-Host") ??
    request.headers.get("host") ??
    new URL(request.url).host;
  let protocol = host.includes("localhost") ? "http" : "https";
  if (url.startsWith("/")) {
    return new URL(url, `${protocol}://${host}`).toString();
  }
  return new URL(`${protocol}//${url}`).toString();
}

export function loader({ request }: DataFunctionArgs) {
  const url = new URL(request.url);
  const src = url.searchParams.get("url")!;
  const vercelUrl = "/_vercel/image" + url.search;

  const destination = process.env.VERCEL
    ? getAbsoluteURL(request, vercelUrl)
    : getAbsoluteURL(request, src);
  return fetch(destination);
}

Merge Conflict ❌

Latest commit: remix-run@94695c3

How to resolve

Pull from the upstream repo:

git pull https://github.com/remix-run/remix.git main

There will be a merge conflict, which needs to be resolved manually.

Frequently, these conflicts are regarding GitHub workflow files,
which were deleted in the vercel/remix repo. In this case,
those workflow files can be git rm'd again to resolve.

If there is a conflict within the source code (i.e. in the Remix
compiler) then the conflicts will need to be manually resolved.

Finally, before committing the resolved merge, ensure that the version
field in the "vercel-remix" package's package.json file matches that
of the "remix-dev" package. If the version needs to be updated, update
the Remix-related dependencies in the package.json file as well,
since Remix keeps them in sync.

Using typescript for `remix.config` breaks deployment.

Using typescript for remix.config breaks the deployment:

500: INTERNAL_SERVER_ERROR Code: FUNCTION_INVOCATION_FAILED

Using remix.config.ts works fine locally and also builds on vercel.

This is possibly related to #59 (at least I get the same error Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/var/task/build/build-nodejs-<hash>.js' imported from /var/task/build/server-build-nodejs-<hash>.mjs in the logs).
Switching to remix.config.js solved the issue.

A minimal reproducible example can be found here: https://github.com/expln-ai/remix-tutorial
-> remix.config.js works
-> remix.config.ts doesn't

Merge Conflict ❌

Latest commit: remix-run@a873056

First parameter has member 'readable' that is not a ReadableStream

Hi there,

The Remix apps (mine and my customers') have stopped working quite out of the blue.

Remix version: 2.0.1 to 2.1.0
Node: v18

This cannot be reproduced locally.

See the below error:

Unhandled Promise Rejection 	{"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"TypeError: First parameter has member 'readable' that is not a ReadableStream.","reason":{"errorType":"TypeError","errorMessage":"First parameter has member 'readable' that is not a ReadableStream.","stack":["TypeError: First parameter has member 'readable' that is not a ReadableStream.","    at assertReadableStream (/var/task/node_modules/web-streams-polyfill/dist/ponyfill.js:362:19)","    at convertReadableWritablePair (/var/task/node_modules/web-streams-polyfill/dist/ponyfill.js:3524:9)","    at ReadableStream.pipeThrough (/var/task/node_modules/web-streams-polyfill/dist/ponyfill.js:3608:29)","    at fetchFinale (node:internal/deps/undici/undici:11082:56)","    at mainFetch (node:internal/deps/undici/undici:10974:9)","    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)"]},"promise":{},"stack":["Runtime.UnhandledPromiseRejection: TypeError: First parameter has member 'readable' that is not a ReadableStream.","    at process.<anonymous> (file:///var/runtime/index.mjs:1276:17)","    at process.emit (node:events:529:35)","    at process.emit (node:domain:489:12)","    at emit (node:internal/process/promises:149:20)","    at processPromiseRejections (node:internal/process/promises:283:27)","    at process.processTicksAndRejections (node:internal/process/task_queues:96:32)"]}
Unknown application error occurred
Runtime.Unknown

Happy to provide any more details that could help debug this, I am not sure right now what could be of help!

Merge Conflict ❌

Latest commit: remix-run@11f2d6b

Error [ERR_MODULE_NOT_FOUND]: Cannot find module

Same issue as here: vercel/vercel#10494

It's working locally and on fly but not on Vercel. Running [email protected]

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/var/task/build/build-nodejs-eyJydW50aW1lIjoibm9kZWpzIn0.js' imported from /var/task/build/server-build-nodejs-eyJydW50aW1lIjoibm9kZWpzIn0.mjs
    at new NodeError (node:internal/errors:405:5)
    at finalizeResolution (node:internal/modules/esm/resolve:329:11)
    at moduleResolve (node:internal/modules/esm/resolve:992:10)
    at moduleResolveWithNodePath (node:internal/modules/esm/resolve:936:12)
    at defaultResolve (node:internal/modules/esm/resolve:1178:79)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:835:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}
Error: Runtime exited with error: exit status 1
Runtime.ExitError

Any ideas? I've migrated over to ESM, and I'd assume it's an issue with my project but it looks like it's happening in a fresh project too based on that issue.

Merge Conflict ❌

Latest commit: remix-run@a218369

Support for v2_routeConvention?

I'm using "@vercel/remix": "^1.14.3-patch.1", and while remix dev works fine locally, when I deploy to Vercel I just get Code: FUNCTION_INVOCATION_TIMEOUT.

The logs just show a GET request so I can't tell what the actual error is.

Feel free to clone the repo and give it a try: https://github.com/jgentes/mixpoint

I'm wondering if it's due to the new v2_routeConvention support that I have enabled in the remix.config.js file?

Merge Conflict ❌

Latest commit: remix-run@73e7517

Merge Conflict ❌

Latest commit: remix-run@dfc5870

How to resolve

Pull from the upstream repo:

git pull https://github.com/remix-run/remix.git main

There will be a merge conflict, which needs to be resolved manually.

Frequently, these conflicts are regarding GitHub workflow files,
which were deleted in the vercel/remix repo. In this case,
those workflow files can be git rm'd again to resolve.

If there is a conflict within the source code (i.e. in the Remix
compiler) then the conflicts will need to be manually resolved.

Finally, before committing the resolved merge, ensure that the version
field in the "vercel-remix" package's package.json file matches that
of the "remix-dev" package. If the version needs to be updated, update
the Remix-related dependencies in the package.json file as well,
since Remix keeps them in sync.

Merge Conflict ❌

Latest commit: remix-run@84545a2

Getting OPTIONS 405 Error on first run - Production

Hi,

I recently refactor my code to use @vercel/remix, instead of @vercel/node.
However, when my web page is running on production (on Vercel), I'm getting a 405 Error regarding an OPTIONS request.
It doesn't prevent the page from loading, but I'm not sure why it is happening.
I no longer use server.js since it's not necessary anymore, by the docs you released.

I appreciate if you can let me know if it's an error on my side, or it's something on your side, and when it will be fixed ?

Let me know if you need more information. you can also go straight into this Vercel deployed web page, and see the error on the first load.

Thanks!

Support bundling with `unstable_vitePlugin` introduced in remix v2.2

Official Vercel Remix v2.2 support for the newly introduced unstable vite plugin would be great

Merge Conflict ❌

Latest commit: remix-run@ed70c7f

How to resolve

Pull from the upstream repo:

git pull https://github.com/remix-run/remix.git main

There will be a merge conflict, which needs to be resolved manually.

Frequently, these conflicts are regarding GitHub workflow files,
which were deleted in the vercel/remix repo. In this case,
those workflow files can be git rm'd again to resolve.

If there is a conflict within the source code (i.e. in the Remix
compiler) then the conflicts will need to be manually resolved.

Finally, before committing the resolved merge, ensure that the version
field in the "vercel-remix" package's package.json file matches that
of the "remix-dev" package. If the version needs to be updated, update
the Remix-related dependencies in the package.json file as well,
since Remix keeps them in sync.

Merge Conflict ❌

Latest commit: remix-run@fb74cb6

Response not exposed from @vercel/remix but exists in @remix-run/node

Hi there, based off the docs here: https://vercel.com/docs/frameworks/remix

it says every import from @remix-run/node should be replaced with @vercel/remix and in the default remix template for the entry.server.tsx file it looks like this:

/**
 * By default, Remix will handle generating the HTTP Response for you.
 * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
 * For more information, see https://remix.run/docs/en/main/file-conventions/entry.server
 */

import { PassThrough } from "node:stream";
import type { EntryContext } from "@vercel/remix";
import { Response } from "@remix-run/node";
import { RemixServer } from "@remix-run/react";
import isbot from "isbot";
import { renderToPipeableStream } from "react-dom/server";

const ABORT_DELAY = 5_000;

export default function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  return isbot(request.headers.get("user-agent"))
    ? handleBotRequest(
        request,
        responseStatusCode,
        responseHeaders,
        remixContext
      )
    : handleBrowserRequest(
        request,
        responseStatusCode,
        responseHeaders,
        remixContext
      );
}

function handleBotRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  return new Promise((resolve, reject) => {
    const { pipe, abort } = renderToPipeableStream(
      <RemixServer
        context={remixContext}
        url={request.url}
        abortDelay={ABORT_DELAY}
      />,
      {
        onAllReady() {
          const body = new PassThrough();

          responseHeaders.set("Content-Type", "text/html");

          resolve(
            new Response(body, {
              headers: responseHeaders,
              status: responseStatusCode,
            })
          );

          pipe(body);
        },
        onShellError(error: unknown) {
          reject(error);
        },
        onError(error: unknown) {
          responseStatusCode = 500;
          console.error(error);
        },
      }
    );

    setTimeout(abort, ABORT_DELAY);
  });
}

function handleBrowserRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  return new Promise((resolve, reject) => {
    const { pipe, abort } = renderToPipeableStream(
      <RemixServer
        context={remixContext}
        url={request.url}
        abortDelay={ABORT_DELAY}
      />,
      {
        onShellReady() {
          const body = new PassThrough();

          responseHeaders.set("Content-Type", "text/html");

          resolve(
            new Response(body, {
              headers: responseHeaders,
              status: responseStatusCode,
            })
          );

          pipe(body);
        },
        onShellError(error: unknown) {
          reject(error);
        },
        onError(error: unknown) {
          console.error(error);
          responseStatusCode = 500;
        },
      }
    );

    setTimeout(abort, ABORT_DELAY);
  });
}

Merge Conflict ❌

Latest commit: remix-run@97d82db

Merge Conflict ❌

Latest commit: remix-run@4cb1607

How to resolve

Pull from the upstream repo:

git pull https://github.com/remix-run/remix.git main

There will be a merge conflict, which needs to be resolved manually.

Frequently, these conflicts are regarding GitHub workflow files,
which were deleted in the vercel/remix repo. In this case,
those workflow files can be git rm'd again to resolve.

If there is a conflict within the source code (i.e. in the Remix
compiler) then the conflicts will need to be manually resolved.

Finally, before committing the resolved merge, ensure that the version
field in the "vercel-remix" package's package.json file matches that
of the "remix-dev" package. If the version needs to be updated, update
the Remix-related dependencies in the package.json file as well,
since Remix keeps them in sync.

Edge Routes infinite loading on Remix v2

I tried upgrading to Latest version 2.0.1 from 1.18.1.

All the future flags are enabled, they are working fine.

When you go to a node route, it's fine.

If you navigate to an "edge" route, it's fine.

But if you hard refresh the edge route, it will get stuck and just loads forever.

you can test on the dnb-stack which is open source.

https://dnb-stack.vercel.app/edge

We are also working on a project where we are stuck on 1.17.0 because of the infinite loading.

Could you please take also a look, thanks!

Merge Conflict ❌

Latest commit: remix-run@9a9c955

Merge Conflict ❌

Latest commit: remix-run@ae65995

How to resolve

Pull from the upstream repo:

git pull https://github.com/remix-run/remix.git main

There will be a merge conflict, which needs to be resolved manually.

Frequently, these conflicts are regarding GitHub workflow files,
which were deleted in the vercel/remix repo. In this case,
those workflow files can be git rm'd again to resolve.

If there is a conflict within the source code (i.e. in the Remix
compiler) then the conflicts will need to be manually resolved.

Finally, before committing the resolved merge, ensure that the version
field in the "vercel-remix" package's package.json file matches that
of the "remix-dev" package. If the version needs to be updated, update
the Remix-related dependencies in the package.json file as well,
since Remix keeps them in sync.

Incorrect types for 'defer'

Hey, for remix versions 1.17.1, I noticed that the type returned from the useLoaderData after using defer instead of json gives some weird typings.

// spot =  {id: string, etc...), rating = number
return defer(
  { spot, rating },
)


const promise = useLoaderData<typeof loader>()
  // const promise: {
  //   data: {
  //       spot: {
  //           readonly [Symbol.toStringTag]: string;
  //       };
  //       rating: {
  //           readonly [Symbol.toStringTag]: string;
  //       };
  //   };
  //   readonly [typedDeferredDataBrand]: "TypedDeferredData";
  //   init?: {
  //       headers?: [...][] | ... 2 more ... | undefined;
  //       status?: number | undefined;
  //       statusText?: string | undefined;
  //   } | undefined;
  // }


<React.Suspense fallback={<SpotFallback />}>
        <Await resolve={promise.spot}>
// Property 'spot' does not exist on type '{ data: { spot: { readonly [Symbol.toStringTag]: string; }; rating: { readonly [Symbol.toStringTag]: string; }; }; readonly [typedDeferredDataBrand]: "TypedDeferredData"; init?: { headers?: [...][] | ... 2 more ... | undefined; status?: number | undefined; statusText?: string | undefined; } | undefined; }'.ts(2339)

Merge Conflict ❌

Latest commit: remix-run@a563b97

Merge Conflict ❌

Latest commit: remix-run@10b0399

Merge Conflict ❌

Latest commit: remix-run@30bcd9e

How to resolve

Pull from the upstream repo:

git pull https://github.com/remix-run/remix.git main

There will be a merge conflict, which needs to be resolved manually.

Frequently, these conflicts are regarding GitHub workflow files,
which were deleted in the vercel/remix repo. In this case,
those workflow files can be git rm'd again to resolve.

If there is a conflict within the source code (i.e. in the Remix
compiler) then the conflicts will need to be manually resolved.

Finally, before committing the resolved merge, ensure that the version
field in the "vercel-remix" package's package.json file matches that
of the "remix-dev" package. If the version needs to be updated, update
the Remix-related dependencies in the package.json file as well,
since Remix keeps them in sync.

Merge Conflict ❌

Latest commit: remix-run@11e6412

Merge Conflict ❌

Latest commit: remix-run@f9a25bc

Merge Conflict ❌

Latest commit: remix-run@754248c

How to resolve

Pull from the upstream repo:

git pull https://github.com/remix-run/remix.git main

There will be a merge conflict, which needs to be resolved manually.

Frequently, these conflicts are regarding GitHub workflow files,
which were deleted in the vercel/remix repo. In this case,
those workflow files can be git rm'd again to resolve.

If there is a conflict within the source code (i.e. in the Remix
compiler) then the conflicts will need to be manually resolved.

Finally, before committing the resolved merge, ensure that the version
field in the "vercel-remix" package's package.json file matches that
of the "remix-dev" package. If the version needs to be updated, update
the Remix-related dependencies in the package.json file as well,
since Remix keeps them in sync.

Merge Conflict ❌

Latest commit: remix-run@40a4d7d

Merge Conflict ❌

Latest commit: remix-run@2bb20f1

Merge Conflict ❌

Latest commit: remix-run@e67bbec

Merge Conflict ❌

Latest commit: remix-run@8851599

Streaming error - ReadableStream type mismatch

I am using Remix (2.0.1) and Vercel AI (2.2.13).

I am getting this error when submitting a chat message in production (deployed on Vercel using the Remix template).

The error does not occur locally:

{ url: '/chat/completions' }
TypeError [ERR_INVALID_ARG_TYPE]: The "transform.readable" property must be an instance of ReadableStream. Received an instance of ReadableStream
    at new NodeError (node:internal/errors:405:5)
    at ReadableStream.pipeThrough (node:internal/webstreams/readablestream:363:13)
    at AIStream (/var/task/node_modules/ai/dist/index.js:139:29)
    at OpenAIStream (/var/task/node_modules/ai/dist/index.js:360:14)
    at action4 (/var/task/build/build-nodejs-eyJydW50aW1lIjoibm9kZWpzIn0.js:12965:73)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Object.callRouteActionRR (/var/task/node_modules/@remix-run/server-runtime/dist/data.js:35:16)
    at async callLoaderOrAction (/var/task/node_modules/@remix-run/router/dist/router.cjs.js:3903:16)
    at async submit (/var/task/node_modules/@remix-run/router/dist/router.cjs.js:3275:16)
    at async queryImpl (/var/task/node_modules/@remix-run/router/dist/router.cjs.js:3233:22) {
  code: 'ERR_INVALID_ARG_TYPE'
}

Code to replicate:

/api/chat

import { ChatCompletionRequestMessage, OpenAIApi, Configuration } from "openai-edge"
import {
  OpenAIStream,
  StreamingTextResponse,
} from "ai"

export const action: ActionFunction = async ({
  request,
}: ActionFunctionArgs): Promise<Response> => {
  const json = await request.json()
  const { messages } = json
  const openai = new OpenAIApi(
     new Configuration({
       apiKey: xxxx
     })
  )
  const response = await openai.createChatCompletion({
      model: "gpt-3.5-turbo",
      messages: messages,
      temperature: 0.7,
      stream: true,
    })
  const stream = OpenAIStream(response)
  return new StreamingTextResponse(stream)
}

Merge Conflict ❌

Latest commit: remix-run@10e8e5f

How to resolve

Pull from the upstream repo:

git pull https://github.com/remix-run/remix.git main

There will be a merge conflict, which needs to be resolved manually.

Frequently, these conflicts are regarding GitHub workflow files,
which were deleted in the vercel/remix repo. In this case,
those workflow files can be git rm'd again to resolve.

If there is a conflict within the source code (i.e. in the Remix
compiler) then the conflicts will need to be manually resolved.

Finally, before committing the resolved merge, ensure that the version
field in the "vercel-remix" package's package.json file matches that
of the "remix-dev" package. If the version needs to be updated, update
the Remix-related dependencies in the package.json file as well,
since Remix keeps them in sync.

Merge Conflict ❌

Latest commit: remix-run@bc08834

Merge Conflict ❌

Latest commit: remix-run@9a9c955

Merge Conflict ❌

Latest commit: remix-run@ee7765f

Can't access environment variables in edge runtime

Heya 👋

First of all, thank you for this integration - I'm really excited about the potential here!

My main challenge right now is how to use environment variables in routes configured for the edge. When trying to access process.env, I get an empty object:

Here's the code that logs the above:

// app/config.ts

const windowEnv = (typeof window !== 'undefined' && (window as any).ENV) || {}

// process.env isn't available to the browser, so we fallback to window.ENV, as set by `root.tsx`
export const env = {
  ...(process.env || {}),
  ...windowEnv,
}

console.log({ env })
// Even a regular access of process.env breaks 👇
console.log(process.env)

This export const env is how I access .env variables in both the client and the server, in an unified way. I understand how that could be a source of issue, but even console.log(process.env) isn't returning values.

I also tried logging from the route file, to no avail:

// routes/test-edge.tsx
export const config = {
  runtime: 'edge',
}

console.log({ fromRoute: process.env })

export default function PageRoute() {
  return <h1>From the edge</h1>
}

Let me know if you need further reproduction :)

Edge routes with emotion

Hello,

I am trying to get emotion (mantine ui) working inside a route which is using edge runtime, however since emotion ssr is using some native nodejs modules (stream/buffer) I am kinda stuck. According to this gh comment remix-run#2813 (comment), remix does polyfills when targeting non nodejs environments and I wonder if this is still true? Currently when I am trying to deploy vercel I get the following error:

Error: The Edge Function "layout/:id" is referencing unsupported modules:
        - duplexer2: ./internal/streams/stream, stream
        - html-dom-parser: ./index.js
        - multipipe: stream
        - readable-stream: stream
        - through: stream

In the end I just want to get emotion SSR working on an edge runtime. What is the best solution to do this?

Merge Conflict ❌

Latest commit: remix-run@ac340e3

Vercel build fails for remix v2-pre apps

To reproduce, see

remix-run#7350 (comment)

Errors look like

✘ [ERROR] Could not resolve "node:crypto"
--
12:47:50.104 |  
12:47:50.104 | node_modules/@remix-run/node/dist/sessions/fileStorage.js:15:21:
12:47:50.104 | 15 │ var crypto = require('node:crypto');
12:47:50.104 | ╵                      ~~~~~~~~~~~~~
12:47:50.104 |  
12:47:50.105 | The package "node:crypto" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

Merge Conflict ❌

Latest commit: remix-run@ea7ab3a

Edge routes are overwriting serverless routes when there's a potential overlap

Let's say we have the following two routes (using route conventions v1, not sure how it'd behave with v2):

1. routes/$.tsx - runtime: 'edge'
2. routes/manage/$.tsx - runtime: 'serverless'

By Remix's standards, requests to site.com/manage should call routes/manage/$.tsx, which means using the serverless runtime.

However, in the set-up above, Vercel is using the routes/manage/$.tsx route but with the edge runtime, which breaks it. Here are the logs:

This is fixed if I duplicate routes/manage/$.tsx as routes/manage/index.tsx.

Remix v2 error when deploying to vercel

Deployment is successful but serverless functions don't work.

I get this error:

  AbortController as NodeAbortController,
  ^^^^^^^^^^^^^^^
SyntaxError: Named export 'AbortController' not found. The requested module '@remix-run/node' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@remix-run/node';

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)
Error: Runtime exited with error: exit status 1
Runtime.ExitError```

Merge Conflict ❌

Latest commit: remix-run@eb113b7

Routes generated during build time are ignored

I build route files dynamically from a centralized config file, which is processed during build time. As such, the routes aren't in the Git repository.

Apparently, @vercel/remix only parses routes that are already there before even installing dependencies. As such, my approach is completely broken. Am I right in my diagnostic?

If so, I was wondering if it was possible to parsing routes AFTER build the is ready?

Merge Conflict ❌

Latest commit: remix-run@8436c84