Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Bug] Problemas de conflito de dependencia no deploy

FIz o curso todo, mas tive um problema quando fui fazer o deploy na Vercel. Parece que a versão do TypeScript não é compatível com a versão do react-scripts que utilizei no projeto. O curioso é que funcionou na minha máquina durante todo o curso, porém se eu apago o node_modules e o package-lock.json e executo npm install novamente, o projeto quebra e me retorna um erro parecido com o que aconteceu na Vercel.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: react-scripts@5.0.1
npm ERR! Found: typescript@5.3.3
npm ERR! node_modules/typescript
npm ERR!   typescript@"^5.3.3" from the root project
npm ERR!   peer typescript@">= 2.7" from fork-ts-checker-webpack-plugin@6.5.3
npm ERR!   node_modules/fork-ts-checker-webpack-plugin
npm ERR!     fork-ts-checker-webpack-plugin@"^6.5.0" from react-dev-utils@12.0.1
npm ERR!     node_modules/react-dev-utils
npm ERR!       react-dev-utils@"^12.0.1" from react-scripts@5.0.1
npm ERR!       node_modules/react-scripts
npm ERR!         react-scripts@"5.0.1" from the root project
npm ERR!   1 more (tsutils)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1
npm ERR! node_modules/react-scripts
npm ERR!   react-scripts@"5.0.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: typescript@4.9.5
npm ERR! node_modules/typescript
npm ERR!   peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1
npm ERR!   node_modules/react-scripts
npm ERR!     react-scripts@"5.0.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.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /vercel/.npm/_logs/2024-02-19T19_08_57_610Z-eresolve-report.txt
npm ERR! A complete log of this run can be found in: /vercel/.npm/_logs/2024-02-19T19_08_57_610Z-debug-0.log
Error: Command "npm install" exited with 1

Fiz o que foi falado nos tópicos anteriores, mas me retornou o erro "sh: react-scripts: command not found", sei que preciso resolver os problemas de dependência, mas não sei exatamente como fazer. Tentei atualizar as dependências do projeto com "npm update" mas ele retorna um erro, tentei atualizar o react, mas tbm não tive sucesso. Não tentei usar as flags --force ou --legacy-peer-deps porque a própria mensagem de erro diz que isso pode quebrar o projeto, então queria resolver da melhor maneira possível.

1 resposta
solução!

Consegui resolver, eu criei outro projeto React mas usando o template do TypeScript npx create-react-app my-app --template typescript e peguei as configurações do package.json desse projeto novo. Depois apaguei a pasta "node_modules" e o arquivo "package-lock.json" e rodei o "npm install". Meu arquivo package.json ficou assim:

{
  "name": "organo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.82",
    "@types/react": "^18.2.57",
    "@types/react-dom": "^18.2.19",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Parece que a versão que eu estava usando do TypeScript é mais nova do que a versão que é compatível com a minha versão do React. O projeto todo está no meu GitHub, caso alguém queira dar uma olhada em algo específico: https://github.com/devthiart/react-typescript-organo

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software