react18-dep-compatibility
Oferece uma matriz de compatibilidade de dependências para React 18.3.1 e React 19. Ajuda a garantir que as dependências funcionem juntas.
O que ela faz
Esta ferramenta ajuda a verificar quais versões de outras bibliotecas de programação funcionam com as versões mais recentes do React (React 18 e 19). Ela mostra as versões mínimas necessárias para que tudo funcione junto.
Quando usar
- ✓Ao atualizar seu projeto para o React 18 ou 19.
- ✓Quando você recebe um erro sobre 'dependências incompatíveis' ao instalar pacotes.
- ✓Ao decidir se deve usar uma opção chamada `--legacy-peer-deps`.
Exemplo do que pedir para a IA
“Quais versões do testing-library funcionam com React 19?”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
A ferramenta compara sua versão do React com as versões de outras bibliotecas populares. Ela consulta uma tabela que lista as versões mínimas compatíveis para cada combinação.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add github/awesome-copilot --skill react18-dep-compatibilityOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/github/awesome-copilot/main/skills/react18-dep-compatibility/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
Matriz de Compatibilidade de Dependências do React
Versões mínimas necessárias para compatibilidade com React 18.3.1 e React 19.
Use esta habilidade sempre que verificar se uma dependência suporta uma versão alvo do React, resolver conflitos de dependências peer, decidir se deve atualizar ou usar legacy-peer-deps, ou avaliar o risco de uma migração react-router v5 para v6.
Revise esta matriz antes de executar npm install durante uma atualização do React e antes de aceitar uma resolução de conflito de dependência npm, especialmente onde a compatibilidade do modo concorrente pode ser afetada.
Alvos de Atualização Principal
| Pacote | React 17 (atual) | React 18.3.1 (mín) | React 19 (mín) | Observações |
|---|---|---|---|---|
react |
17.x | 18.3.1 | 19.0.0 | Fixar exatamente em 18.3.1 para a orquestra R18 |
react-dom |
17.x | 18.3.1 | 19.0.0 | Deve corresponder exatamente à versão do react |
Bibliotecas de Teste
| Pacote | React 18 Mín | React 19 Mín | Observações |
|---|---|---|---|
@testing-library/react |
14.0.0 | 16.0.0 | RTL 13 usa ReactDOM.render internamente - quebrado em R18 |
@testing-library/jest-dom |
6.0.0 | 6.0.0 | v5 funciona, mas v6 tem atualizações de correspondência do React 18 |
@testing-library/user-event |
14.0.0 | 14.0.0 | v13 é síncrono, v14 é assíncrono - alteração de API necessária |
jest |
27.x | 27.x | jest 27+ com jsdom 16+ para React 18 |
jest-environment-jsdom |
27.x | 27.x | Deve corresponder à versão do jest |
Apollo Client
| Pacote | React 18 Mín | React 19 Mín | Observações |
|---|---|---|---|
@apollo/client |
3.8.0 | 3.11.0 | 3.8 adiciona useSyncExternalStore para modo concorrente |
graphql |
15.x | 16.x | Apollo 3.8+ peer requer graphql 15 ou 16 |
Leia references/apollo-details.md para problemas de modo concorrente e alterações no MockedProvider.
Emotion
| Pacote | React 18 Mín | React 19 Mín | Observações |
|---|---|---|---|
@emotion/react |
11.10.0 | 11.13.0 | 11.10 adiciona suporte ao modo concorrente do React 18 |
@emotion/styled |
11.10.0 | 11.13.0 | Deve corresponder à versão do @emotion/react |
@emotion/cache |
11.10.0 | 11.13.0 | Se usado diretamente |
React Router
| Pacote | React 18 Mín | React 19 Mín | Observações |
|---|---|---|---|
react-router-dom |
v6.0.0 | v6.8.0 | v5 → v6 é uma migração que quebra - veja detalhes abaixo |
react-router-dom v5 |
5.3.4 (solução alternativa) | ❌ Não suportado | Veja a nota sobre dependências peer legadas |
react-router v5 → v6 é uma sprint de migração SEPARADA. Leia references/router-migration.md.
Redux
| Pacote | React 18 Mín | React 19 Mín | Observações |
|---|---|---|---|
react-redux |
8.0.0 | 9.0.0 | v7 funciona apenas no root legado do R18 - quebra no modo concorrente |
redux |
4.x | 5.x | O próprio Redux é agnóstico de framework - a versão do react-redux importa |
@reduxjs/toolkit |
1.9.0 | 2.0.0 | RTK 1.9 testado contra React 18 |
Outros Pacotes Comuns
| Pacote | React 18 Mín | React 19 Mín | Observações |
|---|---|---|---|
react-query / @tanstack/react-query |
4.0.0 | 5.0.0 | v3 não suporta modo concorrente |
react-hook-form |
7.0.0 | 7.43.0 | v6 tem problemas de modo concorrente |
formik |
2.2.9 | 2.4.0 | v2.2.9 corrigido para React 18 |
react-select |
5.0.0 | 5.8.0 | v4 tem conflitos de dep peer com R18 |
react-datepicker |
4.8.0 | 6.0.0 | v4.8+ adicionou suporte ao React 18 |
react-dnd |
16.0.0 | 16.0.0 | v15 e abaixo têm problemas de modo concorrente R18 |
prop-types |
qualquer | qualquer | Autônomo - não afetado pela versão do React |
Árvore de Decisão para Resolução de Conflitos
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
Regras do --legacy-peer-deps
Use --legacy-peer-deps apenas quando:
- O pacote não tiver uma versão compatível com React 18
- O pacote estiver ativamente mantido (não abandonado)
- O conflito for apenas uma incompatibilidade de declaração de peer dep (não incompatibilidade real de API)
Documente todo o uso de --legacy-peer-deps em um comentário no topo do package.json ou em um arquivo MIGRATION.md explicando por que foi necessário.
Perguntas frequentes
O que são 'peer dependencies'?
São pacotes que seu código precisa, mas que também são necessários por outras bibliotecas que você está usando. Se as versões não batem, pode dar erro.
O que é `--legacy-peer-deps`?
É um comando que força a instalação mesmo com dependências incompatíveis. Deve ser usado com cuidado, pois pode causar problemas.
Por que preciso me preocupar com a versão do React Router?
A atualização do React Router da versão 5 para a 6 é uma grande mudança e requer atenção especial para garantir a compatibilidade com o React 18 ou 19.
Detalhes
Descrição original do autor
React 18.3.1 and React 19 dependency compatibility matrix.
repo: github/awesome-copilot
Popularidade
- Estrelas no GitHub
- 40 mil
- Posição no ranking
- #5327
- Licença
- MIT
- Atualizada em
- 15/10/2026
Comentários
- …
Mais skills deste repositório
acquire-codebase-knowledge
Ajuda seu agente a entender e documentar um projeto de código existente. É útil para novas pessoas entrarem no projeto ou para ter uma visão geral da arquitetura.
github/awesome-copilot
acreadiness-assess
Faz seu agente avaliar a prontidão de um projeto para IA e gerar um relatório. É útil para entender o quão bem um projeto está preparado para usar ferramentas de IA.
github/awesome-copilot
acreadiness-generate-instructions
Ajuda seu agente a criar instruções para ferramentas de IA baseadas em uma avaliação. É útil para melhorar a forma como a IA interage com o código e fecha lacunas identificadas.
github/awesome-copilot
acreadiness-policy
Faz seu agente ajudar a definir ou aplicar políticas para avaliação de projetos de IA. É útil para padronizar a forma como os projetos são avaliados e garantir conformidade.
github/awesome-copilot
Skills parecidas
angular-developer
Ajuda seu agente a criar código Angular e a dar conselhos sobre a estrutura do projeto. É útil para iniciar novos projetos, criar partes do código ou melhorar a performance e acessibilidade.
affaan-m/ECC
frontend-a11y
Ajuda seu agente a tornar interfaces web acessíveis para todos. Ele garante que sites e apps funcionem bem com leitores de tela e navegação por teclado.
affaan-m/ECC
frontend-patterns
Faz seu agente aplicar padrões modernos no desenvolvimento frontend. Ele otimiza performance, gerencia estado e segue boas práticas em React e Next.js.
affaan-m/ECC