react18-dep-compatibility について
React 開発者向けの依存関係互換性リファレンスで、一般的なパッケージが React 18.3.1 と React 19 に対応する最低バージョンを示します。アップグレード計画、peer dependency の競合解消、React Router 移行リスクの評価に役立ちます。
主な機能
- 01React 18 と 19 の最低バージョン表
- 02主要なテスト・状態管理パッケージを網羅
- 03React Router のバージョン互換性情報
- 04peer dependency 競合の解決指針
- 05legacy-peer-deps の使用条件
活用シーン
- 01React バージョンのアップグレード計画
- 02npm の peer dependency 競合解消
- 03react-router v5 から v6 への移行評価
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/react18-dep-compatibilityを入力して読み込まれたか確認します。
同梱ファイルreferences/apollo-details.mdreferences/router-migration.md
詳細
React 依存関係の互換性マトリックス
React 18.3.1 および React 19 との互換性に必要な最小バージョンです。
依存関係が対象の React バージョンをサポートしているか確認する場合、peer dependency の競合を解決する場合、アップグレードするか legacy-peer-deps を使うか判断する場合、または react-router v5 から v6 への移行リスクを評価する場合は、常にこのスキルを使用してください。
React のアップグレード中に npm install を実行する前、および npm の依存関係競合の解決方法を採用する前に、特にコンカレントモードの互換性に影響する可能性がある場合は、このマトリックスを確認してください。
アップグレードの主な対象
| パッケージ | React 17（現在） | React 18.3.1（最小） | React 19（最小） | 備考 |
|---|---|---|---|---|
react | 17.x | 18.3.1 | 19.0.0 | R18 オーケストレーションでは 18.3.1 に正確に固定してください |
react-dom | 17.x | 18.3.1 | 19.0.0 | react のバージョンと完全に一致させる必要があります |
テストライブラリ
| パッケージ | React 18 の最小バージョン | React 19 の最小バージョン | 備考 |
|---|---|---|---|
@testing-library/react | 14.0.0 | 16.0.0 | RTL 13 は内部で ReactDOM.render を使用するため、R18 では動作しません |
@testing-library/jest-dom | 6.0.0 | 6.0.0 | v5 も動作しますが、v6 には React 18 向けの matcher 更新があります |
@testing-library/user-event | 14.0.0 | 14.0.0 | v13 は同期型、v14 は非同期型のため、API の変更が必要です |
jest | 27.x | 27.x | React 18 では jsdom 16 以降とともに jest 27 以降を使用します |
jest-environment-jsdom | 27.x | 27.x | jest のバージョンと一致させる必要があります |
Apollo Client
| パッケージ | React 18 の最小バージョン | React 19 の最小バージョン | 備考 |
|---|---|---|---|
@apollo/client | 3.8.0 | 3.11.0 | 3.8 でコンカレントモード向けに useSyncExternalStore が追加されました |
graphql | 15.x | 16.x | Apollo 3.8 以降の peer dependency は graphql 15 または 16 を要求します |
コンカレントモードの問題と MockedProvider の変更については、references/apollo-details.md をお読みください。
Emotion
| パッケージ | React 18 の最小バージョン | React 19 の最小バージョン | 備考 |
|---|---|---|---|
@emotion/react | 11.10.0 | 11.13.0 | 11.10 で React 18 のコンカレントモードがサポートされました |
@emotion/styled | 11.10.0 | 11.13.0 | @emotion/react と同じバージョンにする必要があります |
@emotion/cache | 11.10.0 | 11.13.0 | 直接使用する場合 |
React Router
| パッケージ | React 18 の最小バージョン | React 19 の最小バージョン | 備考 |
|---|---|---|---|
react-router-dom | v6.0.0 | v6.8.0 | v5 → v6 は破壊的変更を伴う移行です。詳しくは以下を参照してください |
react-router-dom v5 | 5.3.4（回避策） | ❌ 未サポート | レガシー peer deps に関する注記を参照してください |
react-router v5 → v6 は別個の移行スプリントです。 references/router-migration.md をお読みください。
Redux
| パッケージ | React 18 の最小バージョン | React 19 の最小バージョン | 備考 |
|---|---|---|---|
react-redux | 8.0.0 | 9.0.0 | v7 は R18 のレガシールートでのみ動作し、コンカレントモードでは動作しません |
redux | 4.x | 5.x | Redux 自体はフレームワークに依存しません。重要なのは react-redux のバージョンです |
@reduxjs/toolkit | 1.9.0 | 2.0.0 | RTK 1.9 は React 18 に対してテストされています |
その他の一般的なパッケージ
| パッケージ | React 18 の最小バージョン | React 19 の最小バージョン | 備考 |
|---|---|---|---|
react-query / @tanstack/react-query | 4.0.0 | 5.0.0 | v3 はコンカレントモードをサポートしていません |
react-hook-form | 7.0.0 | 7.43.0 | v6 にはコンカレントモードの問題があります |
formik | 2.2.9 | 2.4.0 | v2.2.9 には React 18 向けの修正が適用されています |
react-select | 5.0.0 | 5.8.0 | v4 は R18 との peer dependency 競合があります |
react-datepicker | 4.8.0 | 6.0.0 | v4.8 以降で React 18 のサポートが追加されました |
react-dnd | 16.0.0 | 16.0.0 | v15 以前には R18 のコンカレントモードに関する問題があります |
prop-types | 任意 | 任意 | 単独で動作するため、React のバージョンの影響を受けません |
競合解決の判断ツリー
npm ls shows peer conflict for package X
│
▼
Does package X have a version that supports React 18?
YES → npm install X@[min-compatible-version]
NO ↓
│
Is the package critical to the app?
YES → check GitHub issues for React 18 branch/fork
→ check if maintainer has a PR open
→ last resort: --legacy-peer-deps (document why)
NO → consider removing the package
--legacy-peer-deps のルール
--legacy-peer-deps を使用するのは、次の場合に限ります。
- パッケージに React 18 互換のリリースがない
- パッケージが現在も保守されている（放棄されていない）
- 競合が peer dependency の宣言の不一致に限られ、実際の API 互換性の問題ではない
--legacy-peer-deps の使用はすべて、必要だった理由を説明するコメントを package.json の先頭か MIGRATION.md ファイルに記録してください。