Tech Blog
•
JavaScriptNode.jsRemixReactRouter

Remix v2 から React Router v7 に アップグレードする

はじめに

  • 2024年11月22日 に React Router v7 がリリースされた
  • Remix の開発チームが React Router の開発と合流したことによって Remix v2 の移行先は React Router v7 になった
  • 最近 Remix v2 から React Router v7 への移行を行ったのでそのまとめです

アップグレードの前に

  • Remix v2 の最新バージョンまで上げておきましょう
    • feature_flag は有効にしておきましょう

基本的に日頃から Remix のバージョンを上げて、 追加される feature_flag を有効にしていれば（一部を除き）スムーズに更新することができます。

アップグレード手順

基本的に React Router の Upgrading from Remix のページに記載の手順で実施していけば問題ありません。 加えて、 codemod を実行することで基本的な書き換えも実施してくれます。

ほぼドキュメント通りなので 個別対応が必要だったファイルアップロード周りについて記載します。

unstable_createMemoryUploadHandler 及び unstable_parseMultipartFormData の置き換え

Remix v2 のときは下記のように unstable_createMemoryUploadHandler と unstable_parseMultipartFormData を使ってファイルを扱っていました。

import {
	type ActionFunctionArgs,
	unstable_createMemoryUploadHandler,
	unstable_parseMultipartFormData,
} from '@remix-run/cloudflare';

export async function action({ context, request }: ActionFunctionArgs) {

  const uploadHandler = unstable_createMemoryUploadHandler();
  const formData = await unstable_parseMultipartFormData(request, uploadHandler);
  const file = formData.get('file') as File;

それを 新たにライブラリを追加し、処理を置き換えていきます。

npm i @mjackson/form-data-parser

  import {
  	type ActionFunctionArgs,
  	unstable_createMemoryUploadHandler,
  	unstable_parseMultipartFormData,
- } from '@remix-run/cloudflare';
+ } from 'react-router';
+ import { parseFormData } from '@mjackson/form-data-parser';

  export async function action({ context, request }: ActionFunctionArgs) {

-   const uploadHandler = unstable_createMemoryUploadHandler();
-   const formData = await unstable_parseMultipartFormData(request, uploadHandler);
+   const formData = await parseFormData(request);
    const file = formData.get('file') as File;

上記で置き換えは完了です。

load-context.ts の置き換え (@remix-run/cloudflare に限る)

React Router v7 の template を確認すると load-context.ts 及び server.tsに記述されていた内容が workers/app.ts に変更されていました。

特別な理由も無いのでこちらも workers/app.ts に変更します。

^ ファイルをベースに load-context.ts 及び server.ts で記載していた内容を移行します。 移行が終わったら、wrangler.toml の main の定義を変更してあげれば終わりです。 また、 wrangler.toml も wrangler.jsonc に変更されていたので変更したい場合は変更してあげてください。

- main = "./server.ts"
+ main = "./workers/app.ts"

最後に

日頃からバージョンアップしていたことで Remix に関する書き換えはほぼ発生しませんでした。（大事） ただ、依存するライブラリの変更、自動修正されない細かな変更は対応が必要なのでプロジェクトで何を使っているかどのように影響するか等頭に入れて取り掛かるとスムーズに進むのではないでしょうか?

References