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指令命令生成定制化的AI代理指令文件。生成.github/copilot-instructions.md(默认,推荐用于VS Code中的Copilot…
official
acreadiness-policy
github
帮助用户选择、编写或应用AgentRC策略。策略通过禁用无关检查、覆盖影响/级别、设置…来定制就绪评分。
official
add-educational-comments
github
为代码文件添加教育性注释,将其转化为有效的学习资源。根据三个可配置的知识水平(初级、中级、高级)调整解释深度和语气。若未提供文件,自动请求文件,并附带编号列表以便快速选择。仅通过教育性注释将文件扩展最多125%(硬性限制:新增400行;超过1000行的文件限制为300行)。保留文件编码、缩进风格、语法正确性以及...
official
adobe-illustrator-scripting
github
使用ExtendScript(JavaScript/JSX)编写、调试和优化Adobe Illustrator自动化脚本。在创建或修改操作…的脚本时使用。
official
agent-governance
github
声明式策略、意图分类及审计追踪,用于控制AI代理工具访问与行为。可组合的治理策略定义允许/禁止的工具、内容过滤器、速率限制及审批要求——以配置而非代码形式存储。语义意图分类在执行工具前通过基于模式的信号检测危险提示(数据泄露、权限提升、提示注入)。工具级治理装饰器在函数层面强制执行策略...
official