Remix v2 -> React Route v7 にアップデートする
kosuke itoRemix v2からReact Router v7へのアップグレードガイドは以下のページにあるので、それにならって進めていく
2024-11-23に cojiさんが日本語ドキュメントを書いてくれたので、そちらを参照するとよさそうです。
kosuke itoIf you have enabled all Remix v2 future flags, upgrading from Remix v2 to React Router v7 mainly involves updating dependencies.
すべてのRemix v2のフューチャーフラグを有効にしている場合、Remix v2からReact Router v7へのアップグレードは主に依存関係の更新を伴います。
とあるので、確認したら一部有効にしていそう
export default defineConfig({
...
..
plugins: [
remix({
future: {
v3_fetcherPersist: true,
v3_relativeSplatPath: true,
v3_throwAbortReason: true,
},
}),
...
..
The majority of steps 2-8 can be automatically updated using a codemod created by community member James Restall.
ステップ2～8の大部分は、コミュニティメンバーのJames Restallが作成したcodemodを使って自動的に更新できる。
とあるので、まずステップ1をやって、その後codemodでゴリっと変換してもらおう
codemodとは？
kosuke itoステップ１
Remix v2アプリケーションに既存のすべてのフューチャーフラグを適用する
Future Flags and Deprecationsページへのリンクがあるので、そちらをみながら進める
kosuke itoFuture Flags and Deprecations
Update to latest v2
remix-runの関連ライブラリをv2の最新バージョンにアップデートする
2.15.0が最新
- "@remix-run/node": "^2.13.1",
- "@remix-run/react": "^2.13.1",
- "@remix-run/serve": "^2.13.1",
- "@remix-run/dev": "^2.13.1",
+ "@remix-run/node": "^2.15.0",
+ "@remix-run/react": "^2.15.0",
+ "@remix-run/serve": "^2.15.0",
+ "@remix-run/dev": "^2.15.0",
$ pnpm install
dependencies:
- @remix-run/node 2.13.1
+ @remix-run/node 2.15.0
- @remix-run/react 2.13.1
+ @remix-run/react 2.15.0
- @remix-run/serve 2.13.1
+ @remix-run/serve 2.15.0
devDependencies:
- @remix-run/dev 2.13.1
+ @remix-run/dev 2.15.0
Done in 7.6s
Remove installGlobals
Update to Node 20+
$ node -v
v21.6.2
Remove installGlobals
自分の場合は、記述がなかった
Adopt the Vite Plugin
現在のアプリを作成時にViteをインストール済
remix({
+ ignoredRouteFiles: ['**/*.css'],
future: {
v3_fetcherPersist: true,
v3_relativeSplatPath: true,
v3_throwAbortReason: true,
+ unstable_optimizeDeps: true,
},
}),
Migrate Tailwind CSS or Vanilla Extract
Adjust your server abort delay
- const ABORT_DELAY = 5_000
- abortDelay={ABORT_DELAY}
追記；他にもABORT_DELAYが記述されている箇所があったので、削除した
v3_routeConfig
v3_routeConfigフラグを有効にすると、Remixのビルトインのファイルシステムルーティングが無効になり、React Router v7の設定ベースのルーティングに切り替わる
自分はファイルシステムルーティングを使用したいので、このフラグを有効にしない
kosuke itoルーティング
Remix v2のunstable_routeConfigフラグを使用せずに、ファイルシステムルーティングを引き続き使用するためのセットアップを行う。
Future Flagページのルーティングの章の説明がわかりにくかったので、Upgrading From Remixの Add a routes.ts fileの章を参照する。
ルーティグの説明は以下を参照すると良いっぽい
セットアップ
pnpm i @react-router/fs-routes
routes.ts ファイルの追加
touch app/routes.ts
import { type RouteConfig } from "@react-router/dev/routes";
import { flatRoutes } from "@react-router/fs-routes";
export default flatRoutes() satisfies RouteConfig;
vite.config.tsでroutesオプションを使用しているので削除する。
remix({
- ignoredRouteFiles: ['**/*.css'],
future: {
v3_fetcherPersist: true,
v3_relativeSplatPath: true,
v3_throwAbortReason: true,
v3_lazyRouteDiscovery: true,
v3_singleFetch: true,
unstable_optimizeDeps: true,
},
}),
codemodで2~8は自動で行われると記述があったが、自分が実行した際に 7. Enable type safety が行われていなかったので、先にやっておくと良さそう
+ .react-router/
{
"include": [
/* ... */
+ ".react-router/types/**/*"
],
"compilerOptions": {
- "types": ["@remix-run/node", "vite/client"],
+ "types": ["@react-router/node", "vite/client"],
/* ... */
+ "rootDirs": [".", "./.react-router/types"]
}
}
2. Update dependencies
ここまででFuture Flagページに書かれていることは全てやったので、codemodを使用してアップデート作業を行う
codemodを実行する。
React Router 7に合わせたコードに変更される。
$ npx codemod remix/2/react-router/upgrade
React Routerのパッケージが入っていないので、変更されたpackage.jsonで新しい依存関係をインストールする
$ pnpm i
9. Update types for
この章は自分は関係ないので、終わり
kosuke ito確認 無事アップデート完了
kosuke ito- Config-based routing: React Router v7の新しいルーティング
- appディレクトリのroutes.tsファイルで設定する
- v3_routeConfigフラグを有効にすると、Remixのビルトインファイルシステムルーティングが無効になり、React Router v7の設定ベースのルーティングに切り替わる
- fs-routes: React Router v7のルーティングに使用するパッケージ
もう少しまとめるが、以下のコードを追加したことで動くようになった
import { reactRouter } from '@react-router/dev/vite'
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'
export default defineConfig({
plugins: [reactRouter(), tsconfigPaths()],
})
- flatRoutes()によって、routesからファイルベースルーティングを行ってくれるっぽい
import { type RouteConfig } from '@react-router/dev/routes'
import { flatRoutes } from '@react-router/fs-routes'
export default flatRoutes() satisfies RouteConfig
+import type { Config } from "@react-router/dev/config";
+export default {
+ ssr: true,
+} satisfies Config;
補足
flatRoutes()の中身を変更することでベースパスを変更することもできる
import { type RouteConfig } from "@react-router/dev/routes";
import { flatRoutes } from "@react-router/fs-routes";
export default flatRoutes({
rootDirectory: "file-routes",
}) satisfies RouteConfig;