ReactRouter v7→v8バージョンアップ | エンジニアの参考書

やりたいこと参考 1. まずはnodeなど周辺ツールのバージョンアップ 2. feature flagsを有効化→動作確認を実施 3. ReactRouterのバージョンアップ

やりたいこと

ReactRouterをv7→v8にバージョンアップする。

参考

1. まずはnodeなど周辺ツールのバージョンアップ

私のプロジェクトではpnpmを使っているので、最新版に上げた。

マイグレーションガイドでは、最低限以下のバージョンである必要がある模様。

node 22.22以上
react 19.2.7以上
vite 7以上

2. feature flagsを有効化→動作確認を実施

公式ドキュメントを見たところ、バージョンアップ方法はかなり親切設計になっていた。

feature flagsは、「これをtrueに設定すると、v8で発生する破壊的変更をv7の状態で有効化し、確認できる」というものである。

そのため、今回は5つのfeature flagsを一つずつ有効化→動作確認をすることで、どの破壊的変更の影響を受けるかを確認することができる。

v8_middleware
v8_splitRouteModules
v8_viteEnvironmentApi
v8_passThroughRequests
v8_trailingSlashAwareDataRequests

私のプロジェクトではもともと v8_middleware を有効化して利用していた。

また、他のフラグは有効化しても影響がなかった。

import type { Config } from "@react-router/dev/config";

// フラグは一つずつ有効化する
export default {
  future: {
    v8_middleware: true,
    v8_splitRouteModules: true,
    v8_viteEnvironmentApi: true,
    v8_passThroughRequests: true,
    v8_trailingSlashAwareDataRequests: true
  },
} satisfies Config;

動作確認にはビルド、型チェック、lint、テストなどを実施。

pnpm run build && pnpm run typecheck && pnpm run format && pnpm run lint && pnpm run test

最後にサーバーを起動して確認。

pnpm run dev

3. ReactRouterのバージョンアップ

feature flagsを全てtrueにして問題が発生しなければ、ReactRouterをバージョンアップする。

pnpm add react-router@latest @react-router/dev@latest @react-router/node@latest @react-router/serve@latest

動作確認すると、以下のエラーが発生した。

Error: The `future.v8_splitRouteModules` flag has been moved to a top-level `config.splitRouteModules` field (default `true`)

これは「feature flagsが不要になったので消してくれ」というエラーなので、先程設定したfeature flagsを全て削除する。

diff --git a/react-router.config.ts b/react-router.config.ts
index 1653922..6ff16f9 100644
--- a/react-router.config.ts
+++ b/react-router.config.ts
@@ -4,11 +4,4 @@ export default {
   // Config options...
   // Server-side render by default, to enable SPA mode set this to `false`
   ssr: true,
-  future: {
-    v8_middleware: true,
-    v8_splitRouteModules: true,
-    v8_viteEnvironmentApi: true,
-    v8_passThroughRequests: true,
-    v8_trailingSlashAwareDataRequests: true,
-  },
 } satisfies Config;

削除後は動作確認問題なし。完了。

onion

Webアプリケーションエンジニア

設計とNeovimが好き。