This codemod automates most of the manual steps outlined in the Remix to React Router upgrade guide.

This recipe is a set of codemods that will help migrate to Remix.js v2.

In your remix.config.js, rename devServerPort to future.v2_dev.port.

Route links properties should all be the React camelCase values instead of HTML lowercase values.

In your remix.config.js, rename browserBuildDirectory to assetsBuildDirectory.

Before

This hook is now called useNavigation to avoid confusion with the recent React hook by the same name. It also no longer has the type field and flattens the submission object into the navigation object itself.

In v1, a thrown Response rendered the closest CatchBoundary while all other unhandled exceptions rendered the ErrorBoundary. In v2 there is no CatchBoundary and all unhandled exceptions will render the ErrorBoundary, response or otherwise.

ne place this is likely to surface and require a change is your app/entry.server.tsx file, where you'll also need to convert the Node PassThrough into a web ReadableStream via createReadableStreamFromReadable

Using the metaV1 function, you can pass in the meta function's arguments and the same object it currently returns. This function will use the same merging logic to merge the leaf route's meta with its direct parent route meta before converting it to an array of meta descriptors usable in v2.

In your remix.config.js, rename serverBuildDirectory to serverBuildPath and specify a module path, not a directory.

Like useNavigation, useFetcher has flattened the submission and removed the type field.

Instead of returning an object from meta, you will now return an array of descriptors and manage the merge yourself. This brings the meta API closer to links, and it allows for more flexibility and control over how meta tags are rendered.

This codemod runs all of the Single Fetch codemods in order

This codemod adds a defineRoute({ action, loader, Component }) export to your routes and removes the old exports.

This codemod replaces the UIMatch and MetaArgs types with UIMatch_SingleFetch and MetaArgs_SingleFetch

This codemod removes Remix's redirect() and redirectDocument() helper functions to take advantage of the new Single Fetch features.

This codemod removes new Response() calls in actions and loaders and replaces them with mutations to the new response arg from Single Fetch.

This codemod removes Remix's json() helper function to take advantage of the new Single Fetch features.

Adds the typings for Single Fetch to your tsconfig.json file.

Enables the nativeFetch flag in all instances of installGlobals