react18-dep-compatibility

作成者: github

React 18.3.1とReact 19の依存関係互換性マトリックス。

npx skills add https://github.com/github/awesome-copilot --skill react18-dep-compatibility

React Dependency Compatibility Matrix

Minimum versions required for React 18.3.1 and React 19 compatibility.

Use this skill whenever checking whether a dependency supports a target React version, resolving peer dependency conflicts, deciding whether to upgrade or use legacy-peer-deps, or assessing the risk of a react-router v5 to v6 migration.

Review this matrix before running npm install during a React upgrade and before accepting an npm dependency conflict resolution, especially where concurrent mode compatibility may be affected.

Core Upgrade Targets

PackageReact 17 (current)React 18.3.1 (min)React 19 (min)Notes
react17.x18.3.119.0.0Pin exactly to 18.3.1 for the R18 orchestra
react-dom17.x18.3.119.0.0Must match react version exactly

Testing Libraries

PackageReact 18 MinReact 19 MinNotes
@testing-library/react14.0.016.0.0RTL 13 uses ReactDOM.render internally - broken in R18
@testing-library/jest-dom6.0.06.0.0v5 works but v6 has React 18 matcher updates
@testing-library/user-event14.0.014.0.0v13 is sync, v14 is async - API change required
jest27.x27.xjest 27+ with jsdom 16+ for React 18
jest-environment-jsdom27.x27.xMust match jest version

Apollo Client

PackageReact 18 MinReact 19 MinNotes
@apollo/client3.8.03.11.03.8 adds useSyncExternalStore for concurrent mode
graphql15.x16.xApollo 3.8+ peer requires graphql 15 or 16

Read references/apollo-details.md for concurrent mode issues and MockedProvider changes.

Emotion

PackageReact 18 MinReact 19 MinNotes
@emotion/react11.10.011.13.011.10 adds React 18 concurrent mode support
@emotion/styled11.10.011.13.0Must match @emotion/react version
@emotion/cache11.10.011.13.0If used directly

React Router

PackageReact 18 MinReact 19 MinNotes
react-router-domv6.0.0v6.8.0v5 → v6 is a breaking migration - see details below
react-router-dom v55.3.4 (workaround)❌ Not supportedSee legacy peer deps note

react-router v5 → v6 is a SEPARATE migration sprint. Read references/router-migration.md.

Redux

PackageReact 18 MinReact 19 MinNotes
react-redux8.0.09.0.0v7 works on R18 legacy root only - breaks on concurrent mode
redux4.x5.xRedux itself is framework-agnostic - react-redux version matters
@reduxjs/toolkit1.9.02.0.0RTK 1.9 tested against React 18

Other Common Packages

PackageReact 18 MinReact 19 MinNotes
react-query / @tanstack/react-query4.0.05.0.0v3 doesn't support concurrent mode
react-hook-form7.0.07.43.0v6 has concurrent mode issues
formik2.2.92.4.0v2.2.9 patched for React 18
react-select5.0.05.8.0v4 has peer dep conflicts with R18
react-datepicker4.8.06.0.0v4.8+ added React 18 support
react-dnd16.0.016.0.0v15 and below have R18 concurrent mode issues
prop-typesanyanyStandalone - unaffected by React version

Conflict Resolution Decision Tree

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 Rules

Only use --legacy-peer-deps when:

  • The package has no React 18 compatible release
  • The package is actively maintained (not abandoned)
  • The conflict is only a peer dep declaration mismatch (not actual API incompatibility)

Document every --legacy-peer-deps usage in a comment at the top of package.json or in a MIGRATION.md file explaining why it was necessary.

githubのその他のスキル

console-rendering
github
Goにおける構造体タグベースのコンソールレンダリングシステムの使用手順
official
acquire-codebase-knowledge
github
ユーザーが既存のコードベースのマッピング、ドキュメント化、またはオンボーディングを明示的に依頼した場合にこのスキルを使用します。「このコードベースをマッピングして」「ドキュメント化して…」といったプロンプトで起動します。
official
acreadiness-assess
github
Run the AgentRC readiness assessment on the current repository and produce a static HTML dashboard at reports/index.html. Wraps `npx github:microsoft/agentrc…
official
acreadiness-generate-instructions
github
AgentRCのinstructionsコマンドを使用して、カスタマイズされたAIエージェント指示ファイルを生成します。.github/copilot-instructions.md(デフォルト、VS CodeのCopilotに推奨)を出力します…
official
acreadiness-policy
github
ユーザーがAgentRCポリシーを選択、作成、または適用するのを支援します。ポリシーは、関連性のないチェックを無効にしたり、影響度/レベルを上書きしたり、設定することで、レディネススコアリングをカスタマイズします。
official
add-educational-comments
github
コードファイルに教育的なコメントを追加し、効果的な学習リソースに変換します。説明の深さとトーンを、設定可能な3つの知識レベル(初心者、中級、上級)に適応させます。ファイルが提供されない場合は自動的にリクエストし、番号付きリストで素早く選択できます。教育的なコメントのみを使用してファイルを最大125%拡張します(ハードリミット:新しい行400行、1,000行を超えるファイルは300行)。ファイルのエンコーディング、インデントスタイル、構文の正確性を保持し、...
official
adobe-illustrator-scripting
github
ExtendScript(JavaScript/JSX)を使用して、Adobe Illustratorの自動化スクリプトの作成、デバッグ、最適化を行います。スクリプトを作成または修正して操作する際に使用します…
official
agent-governance
github
宣言的なポリシー、意図分類、および監査証跡により、AIエージェントのツールアクセスと動作を制御します。構成可能なガバナンスポリシーは、許可/ブロックされたツール、コンテンツフィルター、レート制限、承認要件を定義し、コードではなく設定として保存されます。セマンティック意図分類は、パターンベースのシグナルを使用して、ツール実行前に危険なプロンプト(データ流出、権限昇格、プロンプトインジェクション)を検出します。ツールレベルのガバナンスデコレーターは、関数にポリシーを適用します...
official