Skip to content

[remix] Add support for React Router v7#12904

Merged
TooTallNate merged 1 commit intomainfrom
tootallnate/zero-3171-update-vercelremix-builder-to-be-rr-v7-aware
Jan 25, 2025
Merged

[remix] Add support for React Router v7#12904
TooTallNate merged 1 commit intomainfrom
tootallnate/zero-3171-update-vercelremix-builder-to-be-rr-v7-aware

Conversation

@TooTallNate
Copy link
Copy Markdown
Member

@TooTallNate TooTallNate commented Jan 23, 2025 •
edited
Loading

Updates the @vercel/remix-builder Builder package to support React Router v7 apps. Implementation-wise, RRv7 is handled almost identically as Remix v2 + Vite, but with the name "remix" changed to "react-router" in a few places.

All the same features that are supported on Vercel when using Remix are now also supported when using React Router (when combined with the Preset, see #12903).

NOTE: E2E tests will be added in a follow-up PR after the new framework preset is added, so that autodetection will work in the tests.

@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Jan 23, 2025

🦋 Changeset detected

Latest commit: faea842

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@vercel/remix-builder Minor
vercel Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@TooTallNate TooTallNate mentioned this pull request Jan 23, 2025
Merged
@TooTallNate TooTallNate marked this pull request as ready for review January 24, 2025 17:40
EndangeredMassa
EndangeredMassa approved these changes Jan 24, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@EndangeredMassa EndangeredMassa left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NOTE: E2E tests will be added in a follow-up PR after the new framework preset is added, so that autodetection will work in the tests.

Makes sense, but are there any other tests we can add? If we extract some functions, maybe?

packages/remix/src/build-vite.ts
Comment on lines +97 to +103
// Determine if this is a React Router project
const isReactRouter = findConfig(workPath, 'react-router.config', [
'.js',
'.ts',
'.mjs',
'.mts',
]);
Copy link
Copy Markdown
Contributor

@EndangeredMassa EndangeredMassa Jan 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (non-blocking): consider classes

The repeated checks of isReactRouter imply that there are two distinct sets of data/state/behavior. If we modeled this as classes, the code could be simplified to operate on whichever one instance we need. This would reduce the maintenance burden of this package.‏

I don't think it needs to be in this PR, though.

Looking at it some more, there are distinct sets of data and behavior, but not state that needs to change over time. So, this could be modeled with any one of typed objects, static classes, or class instances. I took a stab at static classes here just because it's a lot easier to refactor that to class instances later, if necessary.

abstract class FrameworkSettings {
  static configFileName: string;
  static primaryPackageName: string;
  static buildCommand: string;
  static buildResultFilePath: string;
  
  static createVariantFrameworkSettings() {
    const isReactRouter = findConfig(workPath, ReactRouterFrameworkSettings.configFileName, [
      '.js',
      '.ts',
      '.mjs',
      '.mts',
    ]);
    
    if (isReactRouter) {
      return ReactRouterFrameworkSettings;
    }
    
    return RemixFrameworkSettings;
  }
  
  createReanderFunction(
    nodeVersion: NodeVersion,
    entrypointDir: string,
    rootDir: string,
    serverBuildPath: string,
    serverEntryPoint: string | undefined,
    frameworkVersion: string,
    config: /*TODO: ResolvedNodeRouteConfig*/ any
  ): Promise<EdgeFunction | NodejsLambda> {
    throw new Error('FrameworkSettings#createReanderFunction not implemented');
  }
  
  /*
    could pull in some behaviors from one level of abstraction higher, like:
    - getFrameworkVersion
    - executeBuild
    - parseBuildResult
  */
}


class RemixFrameworkSettings extends FrameworkSettings{
  static primaryPackageName = '@remix-run/dev';
  static buildCommand = 'remix build';
  static buildResultFilePath =  '.vercel/remix-build-result.json';
  static configFileName = 'react-router.config';
  
  static createReanderFunction(
    nodeVersion: NodeVersion,
    entrypointDir: string,
    rootDir: string,
    serverBuildPath: string,
    serverEntryPoint: string | undefined,
    frameworkVersion: string,
    config: /*TODO: ResolvedNodeRouteConfig*/ any
  ): Promise<EdgeFunction | NodejsLambda> {
    // TODO: add in the implementation
  }
  
  // TODO: pull in the implementations for:
  // - `createRenderEdgeFunction`
  // - `createRenderNodeFunction`
}

class ReactRouterFrameworkSettings extends FrameworkSettings{
  static configFileName = ''; // TODO
  static primaryPackageName = 'react-router';
  static buildCommand = 'react-router build';
  static buildResultFilePath =  '.vercel/react-router-build-result.json';
  
  static createReanderFunction(
    nodeVersion: NodeVersion,
    entrypointDir: string,
    rootDir: string,
    serverBuildPath: string,
    serverEntryPoint: string | undefined,
    frameworkVersion: string,
    config: /*TODO: ResolvedNodeRouteConfig*/ any
  ): Promise<EdgeFunction | NodejsLambda> {
    // TODO: add in the implementation
  }
}

Copy link
Copy Markdown
Member Author

@TooTallNate TooTallNate Jan 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good. Will tidy up the logic in a follow up PR.

@TooTallNate TooTallNate added this pull request to the merge queue Jan 25, 2025
github-merge-queue bot pushed a commit that referenced this pull request Jan 25, 2025
@TooTallNate
[remix] Add support for React Router v7 (#12904)
daab669 
Updates the `@vercel/remix-builder` Builder package to support React
Router v7 apps. Implementation-wise, RRv7 is handled almost identically
as Remix v2 + Vite, but with the name "remix" changed to "react-router"
in a few places.

All the same features that are supported on Vercel when using Remix are
now also supported when using React Router (when combined with the
Preset, see #12903).

**NOTE:** E2E tests will be added in a follow-up PR after the new
framework preset is added, so that autodetection will work in the tests.
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Jan 25, 2025
@TooTallNate TooTallNate added this pull request to the merge queue Jan 25, 2025
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Jan 25, 2025
@TooTallNate TooTallNate added this pull request to the merge queue Jan 25, 2025
Merged via the queue into main with commit ac6a62e Jan 25, 2025
@TooTallNate TooTallNate deleted the tootallnate/zero-3171-update-vercelremix-builder-to-be-rr-v7-aware branch January 25, 2025 09:26
@vercel-release-bot vercel-release-bot mentioned this pull request Jan 25, 2025
Merged
@erikareads erikareads mentioned this pull request Jan 27, 2025
Merged
github-merge-queue bot pushed a commit that referenced this pull request Jan 27, 2025
@TooTallNate
[frameworks] Add "react-router" framework entry (#12905)
fb0a542 
Adds a new framework entry for React Router (when being used as a
framework). The same Remix builder will be used internally, but having a
dedicated preset allows for auto-detection to work and will show the
correct logo when being used in the Project Settings.

**Note:** Merge _after_ #12904.
github-merge-queue bot pushed a commit that referenced this pull request Jan 28, 2025
@erikareads
[remix] Create an interface for differences remix vs react-router (#1…
56f72ff 
…2925)

An attempt at tidying up the logic per:
#12904 (comment)
EndangeredMassa pushed a commit that referenced this pull request Jan 28, 2025
@vercel-release-bot @github-actions
Version Packages (#12851)
1e98464 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @vercel/[email protected]

### Major Changes

- Initial release
([#12903](#12903))

## @vercel/[email protected]

### Minor Changes

- Add `useWebApi` property to `NodejsLambda` class
([#12873](#12873))

- [build-utils] convert NodeVersion to class and add state getter
([#12883](#12883))
    [ruby] convert RubyVersion to class and add state getter

## [email protected]

### Minor Changes

- [cli] add Node Version to project list output table
([#12895](#12895))

### Patch Changes

- Enable executable bit for `src/vc.js` script
([#12863](#12863))

- Add video integration category to the integration install CLI
([#12870](#12870))

- [cli] update warning in ls --update-required for clarity
([#12864](#12864))

- Added headers for user-supplied rewrites
([#12847](#12847))

- [cli] refactor confirm component to use `client.input.confirm`
interface ([#12846](#12846))

- [build-utils] convert NodeVersion to class and add state getter
([#12883](#12883))
    [ruby] convert RubyVersion to class and add state getter

- Updated dependencies
\[[`56f72ffefb828c3001f7c82259ed0f71db4f629e`](56f72ff),
[`745404610a836fa6c2068c5c192d2f3e8b86918f`](7454046),
[`b6bb709370d2565121808340d43d0a9d90b53de1`](b6bb709),
[`85a64db8d9b6a6e9f7c6a019d51777930a806584`](85a64db),
[`ac6a62eff7db3b3e2713adc1f5bd6a1331d838ce`](ac6a62e),
[`f65ea2245382dd2449c96f695ed692d419a83868`](f65ea22),
[`7af40c1e9d9916cbe8287359662fc940f1d24fce`](7af40c1),
[`06307180c20ca07b65f7cb5e93b65c977b9ccd70`](0630718),
[`3a5507fd1459c77b4491f1c9c3a64ad42e4ff009`](3a5507f),
[`cefda60a603d60cc35e4697c36e751cca411e6bb`](cefda60),
[`003866c4c93e893edb7a5e89b519fc8879b370c0`](003866c)]:
    -   @vercel/[email protected]
    -   @vercel/[email protected]
    -   @vercel/[email protected]
    -   @vercel/[email protected]
    -   @vercel/[email protected]
    -   @vercel/[email protected]
    -   @vercel/[email protected]

## @vercel/[email protected]

### Minor Changes

- Make vite detection supersede ionic-react
([#12880](#12880))

## @vercel/functions@1.6.0

### Minor Changes

- Add middleware-related helper functions
([#12938](#12938))

## @vercel/[email protected]

### Minor Changes

- Add support for React Router v7
([#12904](#12904))

- Enable `nativeFetch` when `v3_singleFetch` future flag is enabled
([#12918](#12918))

### Patch Changes

- [remix] Create an interface for differences remix vs react-router
([#12925](#12925))

## @vercel/[email protected]

### Minor Changes

- [build-utils] convert NodeVersion to class and add state getter
([#12883](#12883))
    [ruby] convert RubyVersion to class and add state getter

## @vercel/[email protected]

### Patch Changes

- Updated dependencies
\[[`745404610a836fa6c2068c5c192d2f3e8b86918f`](7454046),
[`3a5507fd1459c77b4491f1c9c3a64ad42e4ff009`](3a5507f)]:
    -   @vercel/[email protected]

## @vercel/[email protected]

### Patch Changes

- Bump next from 14.2.10 to 14.2.21
([#12842](#12842))

## @vercel/[email protected]

### Patch Changes

- Fix local file system readdir to not throw on special file system stat
types ([#12915](#12915))

- Updated dependencies
\[[`d645bdd4312730b10bef89ad9e18e111500849fc`](d645bdd)]:
    -   @vercel/[email protected]

## @vercel/[email protected]

### Patch Changes

- Updated dependencies
\[[`745404610a836fa6c2068c5c192d2f3e8b86918f`](7454046),
[`3a5507fd1459c77b4491f1c9c3a64ad42e4ff009`](3a5507f)]:
    -   @vercel/[email protected]

## @vercel/[email protected]

### Patch Changes

- ensure defaultLocale rewrite doesn't conflict with user-defined
redirects ([#12916](#12916))

- Added headers for user-supplied rewrites
([#12847](#12847))

## @vercel/[email protected]

### Patch Changes

- Fix requests failing due to the presence of `Transfer-Encoding` header
in edge-function dev server.
([#10701](#10701))

- Split `build()`, `prepareCache()` and `startDevServer()` into separate
files ([#12872](#12872))

- Updated dependencies
\[[`745404610a836fa6c2068c5c192d2f3e8b86918f`](7454046),
[`3a5507fd1459c77b4491f1c9c3a64ad42e4ff009`](3a5507f)]:
    -   @vercel/[email protected]

## @vercel/[email protected]

### Patch Changes

- Remove support for VERCEL_IPC_FD
([#12908](#12908))

- Add `supportsResponseStreaming` to build output
([#12884](#12884))

## @vercel/[email protected]

### Patch Changes

-   Updated dependencies \[]:
    -   @vercel/[email protected]

## @vercel-internals/[email protected]

### Patch Changes

- Updated dependencies
\[[`745404610a836fa6c2068c5c192d2f3e8b86918f`](7454046),
[`3a5507fd1459c77b4491f1c9c3a64ad42e4ff009`](3a5507f)]:
    -   @vercel/[email protected]

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
QuietCraftsmanship pushed a commit to QuietCraftsmanship/Vercel that referenced this pull request Jul 6, 2025
@TooTallNate
[frameworks] Add "react-router" framework entry (#12905)
61a0369 
Adds a new framework entry for React Router (when being used as a
framework). The same Remix builder will be used internally, but having a
dedicated preset allows for auto-detection to work and will show the
correct logo when being used in the Project Settings.

**Note:** Merge _after_ vercel/vercel#12904.
QuietCraftsmanship pushed a commit to QuietCraftsmanship/Vercel that referenced this pull request Jul 6, 2025
@erikareads
[remix] Create an interface for differences remix vs react-router (#1…
97e4eb3 
…2925)

An attempt at tidying up the logic per:
vercel/vercel#12904 (comment)
QuietCraftsmanship pushed a commit to QuietCraftsmanship/Vercel that referenced this pull request Jul 6, 2025
@github-actions
Version Packages (#12851)
045cdec 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @vercel/[email protected]

### Major Changes

- Initial release
([#12903](vercel/vercel#12903))

## @vercel/[email protected]

### Minor Changes

- Add `useWebApi` property to `NodejsLambda` class
([#12873](vercel/vercel#12873))

- [build-utils] convert NodeVersion to class and add state getter
([#12883](vercel/vercel#12883))
    [ruby] convert RubyVersion to class and add state getter

## [email protected]

### Minor Changes

- [cli] add Node Version to project list output table
([#12895](vercel/vercel#12895))

### Patch Changes

- Enable executable bit for `src/vc.js` script
([#12863](vercel/vercel#12863))

- Add video integration category to the integration install CLI
([#12870](vercel/vercel#12870))

- [cli] update warning in ls --update-required for clarity
([#12864](vercel/vercel#12864))

- Added headers for user-supplied rewrites
([#12847](vercel/vercel#12847))

- [cli] refactor confirm component to use `client.input.confirm`
interface ([#12846](vercel/vercel#12846))

- [build-utils] convert NodeVersion to class and add state getter
([#12883](vercel/vercel#12883))
    [ruby] convert RubyVersion to class and add state getter

- Updated dependencies
\[[`97e4eb3c468b4c35c4b930137215ecd018707121`](vercel/vercel@97e4eb3),
[`0aea17613bd7c4b0cbf174f654efa0cf3abee363`](vercel/vercel@0aea176),
[`c8b8fdca6333c3d4503be696d046f57b2f221431`](vercel/vercel@c8b8fdc),
[`e7536c62bebab05ea989cf10de28c9dc311be2e8`](vercel/vercel@e7536c6),
[`33c6e67f14854ef680db612944063fc405843827`](vercel/vercel@33c6e67),
[`0ded32e2d5ae1d9812d70eb281b226e057b016a9`](vercel/vercel@0ded32e),
[`e1e6b58819ad8606ed4e963af5e1e58984cf02d7`](vercel/vercel@e1e6b58),
[`44dd8ccf5235c7019c14d2a8e34c4c0733ce110d`](vercel/vercel@44dd8cc),
[`1a4f0521f984ce891a3e9847d31e569f407c4319`](vercel/vercel@1a4f052),
[`ff43e4bf3f15a8875afe6f3cc9e22a37110f3751`](vercel/vercel@ff43e4b),
[`a376e638ffe384b962b14685293bccfb4507ab90`](vercel/vercel@a376e63)]:
    -   @vercel/[email protected]
    -   @vercel/[email protected]
    -   @vercel/[email protected]
    -   @vercel/[email protected]
    -   @vercel/[email protected]
    -   @vercel/[email protected]
    -   @vercel/[email protected]

## @vercel/[email protected]

### Minor Changes

- Make vite detection supersede ionic-react
([#12880](vercel/vercel#12880))

## @vercel/[email protected]

### Minor Changes

- Add middleware-related helper functions
([#12938](vercel/vercel#12938))

## @vercel/[email protected]

### Minor Changes

- Add support for React Router v7
([#12904](vercel/vercel#12904))

- Enable `nativeFetch` when `v3_singleFetch` future flag is enabled
([#12918](vercel/vercel#12918))

### Patch Changes

- [remix] Create an interface for differences remix vs react-router
([#12925](vercel/vercel#12925))

## @vercel/[email protected]

### Minor Changes

- [build-utils] convert NodeVersion to class and add state getter
([#12883](vercel/vercel#12883))
    [ruby] convert RubyVersion to class and add state getter

## @vercel/[email protected]

### Patch Changes

- Updated dependencies
\[[`0aea17613bd7c4b0cbf174f654efa0cf3abee363`](vercel/vercel@0aea176),
[`1a4f0521f984ce891a3e9847d31e569f407c4319`](vercel/vercel@1a4f052)]:
    -   @vercel/[email protected]

## @vercel/[email protected]

### Patch Changes

- Bump next from 14.2.10 to 14.2.21
([#12842](vercel/vercel#12842))

## @vercel/[email protected]

### Patch Changes

- Fix local file system readdir to not throw on special file system stat
types ([#12915](vercel/vercel#12915))

- Updated dependencies
\[[`ac4318615e248752ad20ca031f7c903e76e52899`](vercel/vercel@ac43186)]:
    -   @vercel/[email protected]

## @vercel/[email protected]

### Patch Changes

- Updated dependencies
\[[`0aea17613bd7c4b0cbf174f654efa0cf3abee363`](vercel/vercel@0aea176),
[`1a4f0521f984ce891a3e9847d31e569f407c4319`](vercel/vercel@1a4f052)]:
    -   @vercel/[email protected]

## @vercel/[email protected]

### Patch Changes

- ensure defaultLocale rewrite doesn't conflict with user-defined
redirects ([#12916](vercel/vercel#12916))

- Added headers for user-supplied rewrites
([#12847](vercel/vercel#12847))

## @vercel/[email protected]

### Patch Changes

- Fix requests failing due to the presence of `Transfer-Encoding` header
in edge-function dev server.
([#10701](vercel/vercel#10701))

- Split `build()`, `prepareCache()` and `startDevServer()` into separate
files ([#12872](vercel/vercel#12872))

- Updated dependencies
\[[`0aea17613bd7c4b0cbf174f654efa0cf3abee363`](vercel/vercel@0aea176),
[`1a4f0521f984ce891a3e9847d31e569f407c4319`](vercel/vercel@1a4f052)]:
    -   @vercel/[email protected]

## @vercel/[email protected]

### Patch Changes

- Remove support for VERCEL_IPC_FD
([#12908](vercel/vercel#12908))

- Add `supportsResponseStreaming` to build output
([#12884](vercel/vercel#12884))

## @vercel/[email protected]

### Patch Changes

-   Updated dependencies \[]:
    -   @vercel/[email protected]

## @vercel-internals/[email protected]

### Patch Changes

- Updated dependencies
\[[`0aea17613bd7c4b0cbf174f654efa0cf3abee363`](vercel/vercel@0aea176),
[`1a4f0521f984ce891a3e9847d31e569f407c4319`](vercel/vercel@1a4f052)]:
    -   @vercel/[email protected]

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@trek trek Awaiting requested review from trek

@onsclom onsclom Awaiting requested review from onsclom

@jeffsee55 jeffsee55 Awaiting requested review from jeffsee55

2 more reviewers

@EndangeredMassa EndangeredMassa EndangeredMassa approved these changes

@erikareads erikareads erikareads approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@TooTallNate @EndangeredMassa @erikareads