react18-dep-compatibility
Offers a dependency compatibility matrix for React 18.3.1 and React 19. It helps ensure dependencies work together.
What it does
This tool helps check which versions of other programming libraries work with the latest React versions (React 18 and 19). It shows the minimum versions needed for everything to work together.
When to use it
- ✓When updating your project to React 18 or 19.
- ✓When you get an error about 'incompatible dependencies' during package installation.
- ✓When deciding whether to use the `--legacy-peer-deps` option.
Example of what to ask your AI
“What versions of testing-library work with React 19?”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The tool compares your React version with versions of other popular libraries. It consults a table listing the minimum compatible versions for each combination.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add github/awesome-copilot --skill react18-dep-compatibilityOr download just the file:
curl -L https://raw.githubusercontent.com/github/awesome-copilot/main/skills/react18-dep-compatibility/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
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
| Package | React 17 (current) | React 18.3.1 (min) | React 19 (min) | Notes |
|---|---|---|---|---|
react |
17.x | 18.3.1 | 19.0.0 | Pin exactly to 18.3.1 for the R18 orchestra |
react-dom |
17.x | 18.3.1 | 19.0.0 | Must match react version exactly |
Testing Libraries
| Package | React 18 Min | React 19 Min | Notes |
|---|---|---|---|
@testing-library/react |
14.0.0 | 16.0.0 | RTL 13 uses ReactDOM.render internally - broken in R18 |
@testing-library/jest-dom |
6.0.0 | 6.0.0 | v5 works but v6 has React 18 matcher updates |
@testing-library/user-event |
14.0.0 | 14.0.0 | v13 is sync, v14 is async - API change required |
jest |
27.x | 27.x | jest 27+ with jsdom 16+ for React 18 |
jest-environment-jsdom |
27.x | 27.x | Must match jest version |
Apollo Client
| Package | React 18 Min | React 19 Min | Notes |
|---|---|---|---|
@apollo/client |
3.8.0 | 3.11.0 | 3.8 adds useSyncExternalStore for concurrent mode |
graphql |
15.x | 16.x | Apollo 3.8+ peer requires graphql 15 or 16 |
Read references/apollo-details.md for concurrent mode issues and MockedProvider changes.
Emotion
| Package | React 18 Min | React 19 Min | Notes |
|---|---|---|---|
@emotion/react |
11.10.0 | 11.13.0 | 11.10 adds React 18 concurrent mode support |
@emotion/styled |
11.10.0 | 11.13.0 | Must match @emotion/react version |
@emotion/cache |
11.10.0 | 11.13.0 | If used directly |
React Router
| Package | React 18 Min | React 19 Min | Notes |
|---|---|---|---|
react-router-dom |
v6.0.0 | v6.8.0 | v5 → v6 is a breaking migration - see details below |
react-router-dom v5 |
5.3.4 (workaround) | ❌ Not supported | See legacy peer deps note |
react-router v5 → v6 is a SEPARATE migration sprint. Read references/router-migration.md.
Redux
| Package | React 18 Min | React 19 Min | Notes |
|---|---|---|---|
react-redux |
8.0.0 | 9.0.0 | v7 works on R18 legacy root only - breaks on concurrent mode |
redux |
4.x | 5.x | Redux itself is framework-agnostic - react-redux version matters |
@reduxjs/toolkit |
1.9.0 | 2.0.0 | RTK 1.9 tested against React 18 |
Other Common Packages
| Package | React 18 Min | React 19 Min | Notes |
|---|---|---|---|
react-query / @tanstack/react-query |
4.0.0 | 5.0.0 | v3 doesn't support concurrent mode |
react-hook-form |
7.0.0 | 7.43.0 | v6 has concurrent mode issues |
formik |
2.2.9 | 2.4.0 | v2.2.9 patched for React 18 |
react-select |
5.0.0 | 5.8.0 | v4 has peer dep conflicts with R18 |
react-datepicker |
4.8.0 | 6.0.0 | v4.8+ added React 18 support |
react-dnd |
16.0.0 | 16.0.0 | v15 and below have R18 concurrent mode issues |
prop-types |
any | any | Standalone - 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.
FAQ
What are 'peer dependencies'?
These are packages your code needs, but which are also required by other libraries you are using. If the versions don't match, it can cause errors.
What is `--legacy-peer-deps`?
It's a command that forces installation even with incompatible dependencies. It should be used cautiously as it might cause issues.
Why do I need to worry about the React Router version?
Upgrading React Router from version 5 to 6 is a major change and requires special attention to ensure compatibility with React 18 or 19.
Details
Original description by the author
React 18.3.1 and React 19 dependency compatibility matrix.
repo: github/awesome-copilot
Popularity
- GitHub stars
- 40k
- Ranking position
- #5327
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
acquire-codebase-knowledge
Helps your agent understand and document an existing code project. It's useful for onboarding new people or getting an overview of the architecture.
github/awesome-copilot
acreadiness-assess
Enables your agent to assess a project's readiness for AI and generate a report. It's useful for understanding how well a project is prepared to use AI tools.
github/awesome-copilot
acreadiness-generate-instructions
Helps your agent create instructions for AI tools based on an assessment. It's useful for improving how AI interacts with code and closing identified gaps.
github/awesome-copilot
acreadiness-policy
Enables your agent to help define or apply policies for AI project assessment. It's useful for standardizing how projects are evaluated and ensuring compliance.
github/awesome-copilot
Similar skills
angular-developer
Helps your agent create Angular code and give project structure advice. Useful for starting new projects, creating code parts, or improving performance and accessibility.
affaan-m/ECC
frontend-a11y
Helps your agent make web interfaces accessible to everyone. It ensures websites and apps work well with screen readers and keyboard navigation.
affaan-m/ECC
frontend-patterns
Has your agent apply modern patterns in frontend development. It optimizes performance, manages state, and follows best practices in React and Next.js.
affaan-m/ECC