[Error] Arvore de dependencias com incompatibilidade de versões entre primer e versão utilizada do react

[guilfer-dev]

Descrição:
Basicamente quando tento fazer a instalação recebo mensagem de erro quanto às dependencias, o erro pode ser visto abaixo.
Minha dúvida gira em torno de dois pontos:
1 - Esse erro é esperado? Não consegui encontrar nas issues
2 - Como devo prosseguir? Aparentemente posso utilizar o comando --force, mas tenho medo de quebrar algo ou posso fazer um downgrade da versão do React (o que me parece uma ideia ainda pior, mas não tenho experiencia suficiente para julgar)

Erro encontrado:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"18.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0" from @primer/[email protected]
npm ERR! node_modules/@primer/react
npm ERR!   @primer/react@"35.2.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Comportamento esperado:
Instalação normal das dependencias

Reprodução:
npm install
Erro ocorre imediatamente após tentativa de instalar as dependencias após a clonagem do repositório utilizando a branch "main".

Configurações utilizadas:

• Windows 11 21H2
• PowerShell
• VSCode 1.6.7
• Ryzen 2600, 32gb
• NVM 1.1.8
• Node 16.15.1 (LTS)
• NPM 8.6.0

Outras observações:
Instalação das dependencias foram concluidas normalmente utilizando o comando --force, do npm.

[filipedeschamps]

Isso começou a acontecer no CI sem motivo aparente algum. Eu não estava conseguindo reproduzir na minha máquina, mas se deletar o node_modules consigo reproduzir. Confesso que não faço a mínima idéia do que está acontecendo e estou investigando aqui e aceito ajuda total 🤝

[aprendendofelipe]

Está intermitente... Deve ser só uma instabilidade no serviço

[filipedeschamps]

Ta muito estranho. Depois de deletar o node_modules consigo reproduzir o erro 100% das vezes, mas uma nova tentativa de rodar os testes lá no CI do PR #444 ... passou.

Em paralelo to cavucando a internet sobre pessoas reclamando disso, mas não estou encontrando muita coisa. Encontrei isso:

https://mobile.twitter.com/lianhuaspace/status/1534588363730460672

[filipedeschamps]

E nada de incidente no status do npm: https://status.npmjs.org/

To muito confuso.

[filipedeschamps]

@aprendendofelipe faça o teste deletando o node_modules, olha que interessante

[aprendendofelipe]

Aqui não consegui reproduzir nem apagando a node_modules... Talvez não tenha um monte de reclamações por ser alguma instabilidade no repositório de alguma das dependências e não um problema generalizado

[guilfer-dev]

Eu já tive problemas com outros projetos migrando eles para o React 18
Muitas dependencias quebraram e aí eu preferi ficar na versão 17
O package.json do primer lista essa versão inclusive: https://github.com/primer/react/blob/main/package.json
Tem uma issue aberta de tipos incompativeis, mas essa incomatibilidade não parece se traduzir no que foi enfrentado: primer/react#2065

Com o --force, nos poucos testes que tive, não enfrentei quaisuqer probelmas na UI
O react veio instalado diretamente pela CLI do next, correto?

[aprendendofelipe]

Aqui também envolve o [email protected] - supabase/ui#350

Assim como

Encontrei isso:
https://mobile.twitter.com/lianhuaspace/status/1534588363730460672

Não deve ser só coincidência

Aqui entre npm ci e npm install já foi mais de 10 vezes e nada de dar o problema

[guilfer-dev]

Aqui também envolve o [email protected] - supabase/ui#350

Assim como

Encontrei isso:
https://mobile.twitter.com/lianhuaspace/status/1534588363730460672

Não deve ser só coincidência

Aqui entre npm ci e npm install já foi mais de 10 vezes e nada de dar o problema

Aqui os erros aconteceram em ambos os comandos.
Removi uma por uma as dependencias que inpediam o npm install e foram essas:

• "@primer/octicons-react": "17.1.0",
• "react-confetti": "6.0.1",
• "@primer/react": "35.2.1",
• "recharts": "2.1.9",

No entanto, reinstalando-as manualmente, sem informar a versão, as unicas que deram problema para instalação foram as duas ultimas;

[filipedeschamps]

@aprendendofelipe qual sua versão do node?

[aprendendofelipe]

@aprendendofelipe qual sua versão do node?

v16.13.2

[filipedeschamps]

Acho que é isso, instalei aqui a 16.13.2 e funcionou 100% das vezes.

Se você instalar a última LTS 16.15.1, dá erro 100% das vezes.

nvm i --lts

[aprendendofelipe]

Nem com a 16.15.1 dá erro aqui... Tentei duas vezes...

Torço para que amanhã tudo esteja normalizado... Boa noite turma!

[filipedeschamps]

Eu vou e volto entre as versões e o comportamento vai e volta! Muito doido! Mesmo fazendo um npm cache clean --force

Boa noite meu caro 🤝

[filipedeschamps]

Isolando mais o problema:

16.15.0 - funciona 100%
16.15.1 - funciona 0%

[filipedeschamps]

@guilfer-dev force a utilização da versão 16.15.0 e veja se funciona 🤝

[guilfer-dev]

@guilfer-dev force a utilização da versão 16.15.0 e veja se funciona 🤝

Tentei usar a versão 16.15.0 e 16.13.2, ambas obtive os mesmos erros, tanto para npm ci, quanto para npm install, limpei o cache do npm e não deu certo também; deletei o lockfile, mas sem resultados positivos.

Qual versão do npm vocês estão utilizando? (isso pode ser importante)

Por curisosidade fiz o teste usando o yarn enquanto eu estava utilizando a versão 16.15 do node e obtive essa mensagem:

error [email protected]: The engine "node" is incompatible with this module. Expected version "16.15.0". Got "16.13.2"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

Seguindo a orientação, passando para essa versão do node 16.15.0 e utilizando do yarn v1.22.15 funcionou corretamente.

[5/5] Building fresh packages...
success Saved lockfile.
Done in 137.73s.

Sem sucesso para o npm, no entanto.

[filipedeschamps]

Esse assunto está ficando cada vez mais interessante.

[rodrigoKulb]

Eu também recebi a mensagem de erro:

utilizando o force funcionou com WARN

Achei uma discussão sobre o assunto semelhante:
https://stackoverflow.com/questions/64718633/unable-to-resolve-dependency-tree-reactjs

[rodrigoKulb]

@filipedeschamps dei um force no package.json com a versão do "react": "17.0.2" e o erro parou, apaguei o package-lock.json.

Sabe se atualizamos essa versão recentemente no projeto?

Mesmo utilizando o node v16.15.1

[filipedeschamps]

@rodrigoKulb não me lembro, acho que foi quando atualizamos o Next.js. Posso estar enganado, mas esse problema de árvore não foi causado por uma atualização que fizemos no package.json, nem quando atualizamos o Node.js para 16. Esse problema começou do nada (o CI começou a quebrar sem motivo algum).

Em paralelo, você está usando a versão 16.15.0? Aqui e no CI pararam de dar problema com ela.

[rodrigoKulb]

@filipedeschamps realmente utilizando o node versão 16.15.0 funciona perfeitamente, o complicado que a versão LTS indicada no site é a 16.15.1.

Será um bug da nova versão?

[filipedeschamps]

@rodrigoKulb eu acho que sim, pelo menos algum comportamento estranho que começou a acontecer do nada, e como no CI usamos o package-lock.json, a única coisa que poderia ter atualizado sem nossa intervenção é a versão do Node.js (que não estava pinada, como está agora). Mas a gente deveria despinar depois que passar essa fase estranha para ganharmos automaticamente os patches de segurança 🤝

[rafa-thayto]

@filipedeschamps tenho duas soluções pra esse problema, ainda bem que já tinha uma issue disso, bom...

Primeira solução:
Abaixar a versão do react e react-dom pra 17.0.2e aguardar o time do @primer/react dar suporte a nova versão do react. (Melhor solução na minha visão, vou explicar o pq na próxima solução)

Segunda solução:
Trocar o gerenciador de pacotes para o yarn e adicionar o resolutions dentro do package.json que basicamente fala pro yarn que ele deve forçar com que todo mundo que usa o react tem que usar a versão 18.1.0 isso faz com que não tenhamos problema de more react instances na mesma aplicação e resolvamos o problema de Could not resolve dependency, porém... Pode causar uma série de efeitos colaterais, pois essa versão nova do React está causando um problema de rodar o useEffect 2 vezes quando tá no modo React.StrictMode

"resolutions": {
    "react": "18.1.0",
    "react-dom": "18.1.0"
}

[filipedeschamps]

@rafa-thayto sensacional, obrigado pela pesquisa! Desde a sua publicação, o time do GitHub lançou novas versões do Primer, precisamos conferir se algo foi feito sobre isso pelo lado deles, mas se não foi, topo voltar a versão do React como você sugeriu. E também o time da Vercel lançou novas versões do Next.js, precisamos ver se há influência nessa equação também, dado que eles estão pesando bastante no React 18 👍

[rodrigoKulb]

@filipedeschamps ando um pouco corrido por aqui, mas com muita saudade de interagir no projeto tabnews!
Acabei de precisar instalar novamente o projeto, acredito que devido ao tempo para resolver o problema de dependências do projeto e como o arquivo packge.json está utilizando a versão "16.15.0" acho válido adicionar essa informação no readme o que acha?

Você precisa ter duas principais dependências instaladas:

• Node.js v16.15.0 (conforme informado na Issue #445)
• Docker Engine v17.12.0 com Docker Compose v1.24.1 (ou qualquer versão superior)

[filipedeschamps]

@rodrigoKulb show! Vamos tentar uma última vez antes de atualizar o README por conta da solução do @rafa-thayto

Primeira solução:
Abaixar a versão do react e react-dom pra 17.0.2e aguardar o time do @primer/react dar suporte a nova versão do react.

@rafa-thayto matou a pau!!! Rodei npm i [email protected] [email protected] e instalou perfeito, até na última versão LTS do Node.js 👍

Vou mandar um PR só com o downgrade do React e vamos ver o que vai acontecer no ambiente de homologação 🤝

[filipedeschamps]

Downgrade do React rodando em: https://tabnews-git-react-tabnews.vercel.app/

[filipedeschamps]

Turma, feito o merge do downgrade e então já está na branch main e em produção. Quem puder fazer um pull e avaliar se o npm i está funcionando em outras versões do Node.js fora a v16.15.0 seria show 🤝 aqui estou na LTS v16.16.0 e está 100% 👍

[rodrigoKulb]

@filipedeschamps aqui deu certo só precisa tirar o required: { node: '16.15.0' },

  "engines": {
    "node": "16.15.0"
  },

Tinha comentando isso aqui 😅️ #445 (comment)

[filipedeschamps]

Ahh que massa!! Show!!

E sugiro não tirar o required, vamos fazer ela voltar a ter o valor 16 que foi a implementação do @tembra para sempre ficarmos na LTS 🤝

Vou continuar atualizando todas as dependências amanhã 👍

[filipedeschamps]

Agora que percebi que na publicação de melhoria dessa segunda-feira eu não listei que atualizamos todas as dependências e consertamos esse problema. Bom, vou deixar agendado para anunciar na próxima semana, mas o mais importante é que está tudo atualizado e rodando 🤝 👍 😍

Qualquer problema, peço que reabram essa issue ou criem uma nova 🤝